css - 居中文本(垂直对齐或填充)？

Question

所以我在将一些文本与图像居中时遇到了一些问题，我将脚本放在下面:

<li>
    <div class="member">
        <div class="image">
            <img src="http://i.imgur.com/vSZyVru.jpg" alt="">
        </div>
        <div class="info">
            <h4>       Bill Nye</h4>
            <p>
                    Researcher and journalist
            </p>
            <ol class="social">
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
            </ol>
        </div>
    </div>
</li>

我不确定是使用垂直对齐还是填充之类的东西？感谢您的帮助!

Answer 1

两种方法

CSS 表格(或实际表格，如果愿意的话)

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
ol {
  list-style: none;
}
.member {
  display: table;
  margin: 1em;
}
.member .image,
.member .info {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid grey;
  padding: 1em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="member">
  <div class="image">
    <img src="http://i.imgur.com/vSZyVru.jpg" alt="">
  </div>
  <div class="info">
    <h4>       Bill Nye</h4>
    <p>
      Researcher and journalist
    </p>
    <ol class="social">
      <li><a href="#"><i class="fa fa-facebook"></i></a>
      </li>
      <li><a href="#"><i class="fa fa-linkedin"></i></a>
      </li>
    </ol>
  </div>
</div>

flexbox

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
ol {
  list-style: none;
}
.member {
  display: inline-flex;
  margin: 1em;
}
.member .image,
.member .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid grey;
  padding: 1em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="member">
  <div class="image">
    <img src="http://i.imgur.com/vSZyVru.jpg" alt="">
  </div>
  <div class="info">
    <h4>       Bill Nye</h4>
    <p>
      Researcher and journalist
    </p>
    <ol class="social">
      <li><a href="#"><i class="fa fa-facebook"></i></a>
      </li>
      <li><a href="#"><i class="fa fa-linkedin"></i></a>
      </li>
    </ol>
  </div>
</div>