在CSS和HTML中对齐文本

Question

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

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

＆＃13;

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的标记无效HTML。

1. 您应该使用img关闭>代码。
2. 您不应该在其他p标记中嵌套p个标记。
3. 您的<p>代码与<a>代码交织在一起。

现在，假设您需要并排3个列，以下是一些解决方案：

予。使用浮点数：

＆＃13;
＆＃13;
#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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

II。使用flexbox：

＆＃13;
＆＃13;
#img_cont {
  display: flex;
}
#img_cont > * {
  padding: 0 10px;
  box-sizing: border-box;
}
#img_cont > a > img {
  max-width: 100%;
  height: auto;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

<击> 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%;
}

现在它按照你想要的方式工作。