与 CSS 中心对齐 - 既然它被替换为，它至少可以正常工作吗？

发布于 2024-12-10 14:06:30 字数 854 浏览 0 评论 0原文

我有一个 CSS 似乎无法提供的简单请求...

我想要并排 3 个 DIV - 第一个和第三个 DIV 包含单个图像 - 第二个 DIV 包含一行文本、一个图像、另一行的文本。

它们应该出现这个

IMAGE1  TEXT1  IMAGE2
        IMAGE2
        TEXT2

- 这是我无法完成的工作 - TEXT1、IMAGE2 和 TEXT2 集中在第二个 DIV 的宽度内 - 像这样

   MY TEXT
MY WIDER IMAGE
     TEXT

CENTER 标签会在几秒钟内完成此操作，但 CSS 显然不能做如下事情就这么简单！？！？

ps 回复代码请求 - 对于初学者来说是这样的

<DIV>
  <IMG src=image1.jpg>
</DIV>
<DIV>
  <p>text 1</p>
  <IMG src=image2.jpg>
  <p>text 2</p>
</DIV>
<DIV>
  <IMG src=image3.jpg>
</DIV>

基本的 CSS

.DIV {
  display: inline;
  float: left;
}

我所需要的就是使中心 DIV 以 CENTER 标签在毫秒内实现的方式集中对齐其内容的魔力......

而我已经尝试了多种方法，包括 inline-block、margin: auto 等 -

原文

I have a simple request which CSS appears unable to deliver...

I'd like 3 DIVs side-by-side - the first and third DIVs contain a single image - the second DIV contains a line of text, an image, another line of text.

They should appear this

IMAGE1  TEXT1  IMAGE2
        IMAGE2
        TEXT2

With - and this is the bit I cannot make work - TEXT1, IMAGE2 and TEXT2 centered within the width of the 2nd DIV - something like this

   MY TEXT
MY WIDER IMAGE
     TEXT

The CENTER tag would have done this in seconds, but CSS cannot apparently do something as simple as that!?!?

p.s. in reply to a request for code - something like this for starters

<DIV>
  <IMG src=image1.jpg>
</DIV>
<DIV>
  <p>text 1</p>
  <IMG src=image2.jpg>
  <p>text 2</p>
</DIV>
<DIV>
  <IMG src=image3.jpg>
</DIV>

The basic CSS would be

.DIV {
  display: inline;
  float: left;
}

All I need is the magic to make that centre DIV align it's contents centrally in the way the CENTER tag would have achieved in milliseconds...

and I've tried a variety of things including inline-block, margin: auto etc. -

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

抹茶夏天i‖ 2024-12-17 14:06:30

尝试这样的事情。

浮动您的div
使用text-align:center作为文本
包裹您的图像并给它们margin:1em auto

HTML

<DIV>
    <p><IMG src=image1.jpg></p>
</DIV>
<DIV>
    <p>text 1</p>
    <p><IMG src=image2.jpg></p>
    <p>text 2</p>
</DIV>
<DIV>
    <p><IMG src=image3.jpg></p>
</DIV>

CSS

div{
    float:left;
    border:1px solid black;
    width:150px;
    height:200px;
}

div p{
    text-align:center;
}

div p img{
    width:20px;
    margin:1em auto;
}

示例： http://jsfiddle.net/PvgSr/

Try something like this.

float your divs
use text-align:center for the text
wrap your images and give them margin:1em auto

HTML

<DIV>
    <p><IMG src=image1.jpg></p>
</DIV>
<DIV>
    <p>text 1</p>
    <p><IMG src=image2.jpg></p>
    <p>text 2</p>
</DIV>
<DIV>
    <p><IMG src=image3.jpg></p>
</DIV>

CSS

div{
    float:left;
    border:1px solid black;
    width:150px;
    height:200px;
}

div p{
    text-align:center;
}

div p img{
    width:20px;
    margin:1em auto;
}

Example: http://jsfiddle.net/PvgSr/

回复收藏 0 原文