开发者社区> 问答> 正文

如何在div中文字两端对齐而图片水平居中?

杨冬芳 2016-06-03 09:29:15 920

screenshot

  <section class="post">
         <div class="post-title">...</div>
         <div class="post-meta">...</div>
         <div class="post-content">
              <p>
              ...
              <br>
              <img src="#.jpg" alt="avatar.jpg" /></p>
          </div>
     </section>

css:

.post {
    border: 1px green solid;
}
.post-content {
    border: 1px blue dashed;
    width: 700px;
    text-align: justify;
}
.post-content p img {
    border: 1px red dashed;
    text-align: center;
}

我想要实现文字在蓝色框里两端对齐,而图片在蓝框里水平居中,但是对img的center属性设置后无效

前端开发
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:25:54

    1)先把img放在 p 标签外面

    <section class="post">
                <div class="post-title">...</div>
                <div class="post-meta">...</div>
                <div class="post-content">
                     <p>
                     ...
                     <br>
                     </p>
                     <img src="#.jpg" alt="avatar.jpg" />
                 </div>
            </section>```

    css:

    .post-content {
        border: 1px blue dashed;
        width: 700px;
        text-align: center;
    }
    .post-content p{
        border: 1px red dashed;
        text-align: center;
        text-align: justify;
    }

    img 自身不能居中,只能在父元素中居中,所以center属性需要设置给父元素,但是 p 又要两端对齐,所以 img 要放在 p 外面。

    2)位置不变,图片居中另外一种方法:

    .post-content p img{
            position: relative;
            left:50%;
            transform:translate(-50%,0);
        }
    
    
    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程