如何首先将图像居中，然后在该图像的两侧垂直居中显示文本？

时间：2016-02-05 22:40:47

标签： html css html5 css3

我想做两件事：

  1. 将图像水平居中放置。
  2. 在图像的两个侧写入文字。
    • 在右侧，文字应左对齐，在左侧，文字应右对齐。
    • 每个文本块应相对于图像垂直居中。

    3. 这是我到目前为止所获得的代码，但我无法让它工作：

    <div>
    <div style="vertical-align: middle; float: left; text-align: right;">
        <strong style="font-size: large;">Credentials</strong>
        <ul>
            <li>dsadsad</li>
            <li>cxzcxzc</li>
            <li>hgfhgfhg</li>
            <li>uytuty</li>
            <li>eqwewqeqwewq</li>
        </ul>
    </div>

    <div style="text-align: center; display: inline-block;">
        <a href="https://i.imgur.com/XIlpRN5.jpg"><img style="height: 400px; width: auto;" src="https://i.imgur.com/XIlpRN5.jpg" /></a>
    </div>

    <div style="vertical-align: middle; float: left; text-align: left;">
        <strong style="font-size: large;">Likes</strong>
        <ul>
            <li>dsadsadsa</li>
            <li>cxzcxzc</li>
            <li>gdgfdgfdgdf</li>
            <li>jhjghjhgj</li>
            <li>ouioiuoiuo</li>
            <li>..,m/.m,.m,</li>
            <li>opupoiuyuyi</li>
            <li>adsaeqw421312</li>
            <li>4356436546</li>
        </ul>
    </div>
</div>

    如何解决这个问题以实现我的目标？谢谢！

3 个答案:

答案 0 :(得分：1)

这是使用父元素上的display flex执行此操作的一种方法。 

.row {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.clear {
    clear:both;
}
.clear:before, .clear:after {
    content:"";
    display:table;
}
.clear:after { clear:both; }
.column {
    float: left;
    width: 33.333%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    text-align: center;
}
.column img {
    max-width: 100%;
}
.column:first-of-type {
    text-align: right;
}
.column:last-of-type {
    text-align: left;
}
<div class="row clear">
    <div class="column">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae magnam distinctio vel necessitatibus vero quaerat soluta ducimus, amet minima consequuntur nulla! Inventore maiores suscipit minus animi corporis porro illo quaerat!</p>
    </div>
    <div class="column">
        <img src="http://i.imgur.com/I9QJ2wP.png">
    </div>
    <div class="column">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae magnam distinctio vel necessitatibus vero quaerat soluta ducimus, amet minima consequuntur nulla! Inventore maiores suscipit minus animi corporis porro illo quaerat!</p>
    </div>
</div>

答案 1 :(得分：1)

以下是样本的清理版本

＆＃13;
＆＃13; 
.table {
  display: table;
  width: 100%;
}
.cell {
  display: table-cell;
  padding: 10px;
  width: 33%;
  vertical-align: middle;
}
.cell:first-child {
  text-align: left;
}
.cell:last-child {
  text-align: right;
}
.font-large {
  font-size: large;
  font-weight: bold;
}
.img {
  height: 400px;
  width: auto;
}
＆＃13; 
<div class="table">
    <div class="cell">
        <span class="font-large">Credentials</span>
        <ul>
            <li>dsadsad</li>
            <li>cxzcxzc</li>
            <li>hgfhgfhg</li>
            <li>uytuty</li>
            <li>eqwewqeqwewq</li>
        </ul>
    </div>

    <div class="cell">
        <a href="https://i.imgur.com/XIlpRN5.jpg"><img class="img" src="https://i.imgur.com/XIlpRN5.jpg" /></a>
    </div>

    <div class="cell">
        <span class="font-large">Likes</span>
        <ul>
            <li>dsadsadsa</li>
            <li>cxzcxzc</li>
            <li>gdgfdgfdgdf</li>
            <li>jhjghjhgj</li>
            <li>ouioiuoiuo</li>
            <li>..,m/.m,.m,</li>
            <li>opupoiuyuyi</li>
            <li>adsaeqw421312</li>
            <li>4356436546</li>
        </ul>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

这是一个已清理的flex版本

＆＃13;
＆＃13; 
.table {
  display: flex;
  align-items: center;
  width: 100%;
}
.cell {
  padding: 10px;
  width: 33%;
}
.cell:first-child {
  text-align: left;
}
.cell:last-child {
  text-align: right;
}
.font-large {
  font-size: large;
  font-weight: bold;
}
.img {
  height: 400px;
  width: auto;
}
＆＃13; 
<div class="table">
    <div class="cell">
        <span class="font-large">Credentials</span>
        <ul>
            <li>dsadsad</li>
            <li>cxzcxzc</li>
            <li>hgfhgfhg</li>
            <li>uytuty</li>
            <li>eqwewqeqwewq</li>
        </ul>
    </div>

    <div class="cell">
        <a href="https://i.imgur.com/XIlpRN5.jpg"><img class="img" src="https://i.imgur.com/XIlpRN5.jpg" /></a>
    </div>

    <div class="cell">
        <span class="font-large">Likes</span>
        <ul>
            <li>dsadsadsa</li>
            <li>cxzcxzc</li>
            <li>gdgfdgfdgdf</li>
            <li>jhjghjhgj</li>
            <li>ouioiuoiuo</li>
            <li>..,m/.m,.m,</li>
            <li>opupoiuyuyi</li>
            <li>adsaeqw421312</li>
            <li>4356436546</li>
        </ul>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

尝试使用flexbox。

CSS + HTML：

body > div {
    display: flex;
    flex-flow: horizontal;
    align-items: center;
    justify-items: space-around;
    justify-content: center;
    flex-wrap: no-wrap;

    /* For IE 10, 11 */
    display: -ms-flexbox;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    -ms-flex-pack: center;
    -ms-flex-align: center;
}
ul{ list-style: none; padding-left: 0;}
body > div > div {margin: 10px;}
<div>
<div style="text-align: right;">
    <strong style="font-size: large;">Credentials</strong>
    <ul>
        <li>dsadsad</li>
        <li>cxzcxzc</li>
        <li>hgfhgfhg</li>
        <li>uytuty</li>
        <li>eqwewqeqwewq</li>
    </ul>
</div>

<div style="text-align: center; display: inline-block;">
    <a href="image.jpg">
    <img src="http://placekitten.com/500/440" style="height: 400px; width: auto;" src="image.jpg" /></a>
</div>
<div style="text-align: left;">
    <strong style="font-size: large;">Likes</strong>
    <ul>
        <li>dsadsadsa</li>
        <li>cxzcxzc</li>
        <li>gdgfdgfdgdf</li>
        <li>jhjghjhgj</li>
        <li>ouioiuoiuo</li>
        <li>..,m/.m,.m,</li>
        <li>opupoiuyuyi</li>
        <li>adsaeqw421312</li>
        <li>4356436546</li>
    </ul>
</div>
</div>

相关问题
最新问题