我有一个 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 等 -
最佳答案
尝试这样的事情。
float
你的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;
}
关于css - 使用 CSS 居中对齐 - 因为它被替换为 <CENTER>,它至少可以正常工作吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7809638/