在CSS和HTML中对齐文本

Question

我正在尝试使用CSS将三个图像与下面的文本水平对齐。

我尝试了各种方法，但每个方法都会使图像垂直对齐并且文本与图像不对齐。

 #img_cont { display: table; width: 90%; margin: 20px auto; } #img_cont a { display: table-cell; text-align: center; width: 16%; } #img_cont img { width: 100%; max-width: 150px; } .reviews_block { background: #F04950 url('images/layout/love_hearts.png') center; color: #F5F5F5; position: relative; -webkit-box-shadow: inset 0 -9px 11px -5px rgba(104, 12, 16,.5), inset 0 9px 11px -5px rgba(104, 12, 16,.5); -moz-box-shadow: inset 0 -9px 11px -5px rgba(104, 12, 16,.5), inset 0 9px 11px -5px rgba(104, 12, 16,.5); box-shadow: inset 0 -9px 11px -5px rgba(104, 12, 16,.5), inset 0 9px 11px -5px rgba(104, 12, 16,.5); } .reviews_block a { color: #F5F5F5; } .reviews_block .reviews .section_content { max-width: 1100px; margin: auto; padding: 3%; } .reviews_block .reviews { text-align: center; } .reviews_block .reviews img { width: auto; } .reviews_block .reviews .reviewer_pic { background: #FFF; display: table; margin: 2em auto; padding: .5em; border: 1px solid #F76F80; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .reviews_block .reviews .reviewer_pic img { background: #FFF; padding: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .reviewer_info p { line-height: 150%; display: table; margin: 0 auto; } .review_rating { display: table; font-size: 200%; line-height: 100%; margin: 1em auto; } .review_content { max-width: 650px; margin: auto; font-size: 130%; line-height: 150%; } .review_pullquote { margin: .5em 0; padding: 0; border: 0; color: #FFF; line-height: 120%; font-weight: normal; font-size: 200%; font-weight: 900; font-size: 250%; line-height: 100%; } 

 <p id="img_cont"> <a href="#"><img src="/wp-content/themes/webbie/images/write13.png" <p> Sample text here. </a></p> <a href="#"><img src="/wp-content/themes/webbie/images/write13.png" <p> Sample text here. </a></p> <a href="#"><img src="/wp-content/themes/webbie/images/write13.png" <p> Sample text here. </a></p> </p> 

Answer 1

您的标记不是有效的HTML 。

1. 你应该使用>关闭你的img标签。
2. 你不应该有p嵌套在其他标签p标签。
3. 您的<p>标签与<a>标签交织在一起。

---

现在，假设您需要并排3个列，这里有一些解决方案：

I.使用浮动：

 #img_cont > * { width: 33.33%; float: left; position: relative; padding: 0 10px; box-sizing: border-box; } #img_cont > a > img { max-width: 100%; height: auto; } 

 <div id="img_cont"> <a href="#"> <img src="http://s3.amazonaws.com/37assets/svn/generic-brands.jpg" /> <p>Sample text here.</p> </a> <a href="#"> <img src="http://s3.amazonaws.com/37assets/svn/generic-brands.jpg" /> <p>Sample text here.</p> </a> <a href="#"> <img src="http://s3.amazonaws.com/37assets/svn/generic-brands.jpg" /> <p>Sample text here.</p> </a> </div> 

II。 使用flexbox：

 #img_cont { display: flex; } #img_cont > * { padding: 0 10px; box-sizing: border-box; } #img_cont > a > img { max-width: 100%; height: auto; } 

 <div id="img_cont"> <a href="#"> <img src="http://s3.amazonaws.com/37assets/svn/generic-brands.jpg" /> <p>Sample text here.</p> </a> <a href="#"> <img src="http://s3.amazonaws.com/37assets/svn/generic-brands.jpg" /> <p>Sample text here.</p> </a> <a href="#"> <img src="http://s3.amazonaws.com/37assets/svn/generic-brands.jpg" /> <p>Sample text here.</p> </a> </div> 

III。 使用html表

不要使用表格进行布局 。 编码很糟糕 。 （它曾经是错误的但正在运行的跨浏览器解决方案。但是，有消息称，Chrome开发人员（Chrome目前的市场份额超过50％）目前正在考虑采取措施阻止将table元素用于除表格数据）。 总之， 不要用它 ！

Answer 2

<p id="img_cont">
  <a href="#"><img src="/wp-content/themes/webbie/images/write13.png" <p> Sample text here. </a></p>
  <a href="#"><img src="/wp-content/themes/webbie/images/write13.png" <p> Sample text here. </a></p>
  <a href="#"><img src="/wp-content/themes/webbie/images/write13.png" <p> Sample text here. </a></p>
</p>

是非常错的。 改为：

 <p id="img_cont">
  <a href="#"><img src="/wp-content/themes/webbie/images/write13.png"> <p> Sample text here. </p></a>
  <a href="#"><img src="/wp-content/themes/webbie/images/write13.png"> <p> Sample text here. </p></a>
  <a href="#"><img src="/wp-content/themes/webbie/images/write13.png"> <p> Sample text here. </p></a>
</p>

它不会解决您的问题，但它至少会改善一些事情。

Answer 3

看一下这个

http://jsbin.com/cadikaveme/edit?html,css,output

我添加了两种风格

#outterID{
  overflow: hidden;
}

和

.demo{
  float:left;
  width: 33.33%;
}

现在它的工作方式与您想要的完全一致。