css - 使用 CSS 居中对齐 - 因为它被替换为 <CENTER>,它至少可以正常工作吗?

标签 css inline centering

我有一个 CSS 似乎无法交付的简单请求...

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

他们应该这样出现

IMAGE1  TEXT1  IMAGE2
        IMAGE2
        TEXT2

有了 - 这是我无法做到的一点 - TEXT1、IMAGE2 和 TEXT2 在第二个 DIV 的宽度内居中 - 像这样

   MY TEXT
MY WIDER IMAGE
     TEXT

CENTER 标签可以在几秒钟内完成,但 CSS 显然不能做这么简单的事情!?!?

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

<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 等 -

最佳答案

尝试这样的事情。

  1. float 你的div
  2. 对文本使用text-align:center
  3. 包装你的图片并给它们 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/

关于css - 使用 CSS 居中对齐 - 因为它被替换为 <CENTER>,它至少可以正常工作吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7809638/

相关文章:

javascript - CSS/JS : Evenly spreading elements across multiple lines

html - 使用 css 悬停时 td 标签上的边框移动整个表格

c++ - 什么时候在带有头文件和目标文件的类方法中使用 'inline' 关键字?

javascript - 滚动条移动内容

php - 显示滑动新闻水龙头的问题

css - Sass mixin 和 include 不工作

asp.net - 在 aspx 页面中打印函数返回值后面的代码

c++内联函数在GCC内联汇编中包装单个vmovups

python - 如何在pygame中将图像置于窗口中间?

css - Div 不是从容器顶部开始的