css - 文本不会在水平和垂直中心对齐

Question

我正在尝试处理以下 example用于用户配置文件。

不过，我对各个字段中的文本有疑问。我希望它们水平和垂直居中。

使用

vertical-align: middle; 

对我不起作用，或者我做错了什么。

我怎样才能让每个文本片段都完美地居中于其各自的容器？

Answer 1

解决方法如下:

/* -------------------------------- 

Primary style

-------------------------------- */

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div {
  display: block;
}
html,
body {
  background: #f1f1f1;
  font-family: 'Roboto', sans-serif;
  padding: 1em;
}
h1 {
  text-align: center;
  color: #a8a8a8;
  font-size: 200%;
}
.user-data {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: table;
  width: 100%;
  height: 85px;
  background: white;
  margin: 0 auto;
  margin-top: 1em;
  margin-bottom: 20px;
  border-radius: 8px;
  -webkit-transition: all 250ms;
  transition: all 250ms;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.response-layer {
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  font-size: 200%;
  color: #a8a8a8;
}
#user-action-text {
  color: #f1f1f1;
  font-size: 400%;
}
#user-name {
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0px;
  margin-top: 10px;
  width: 304px;
  height: 55px;
  color: white;
}
#user-action {
  background: #e74c3c;
  height: 134px;
}
#user-position {
  height: 74px;
}
#user-uuid {
  height: 54px;
}
section {
  max-width: 650px;
  text-align: center;
  margin: 20px auto;
}
section img {
  border: 0;
  outline: 0;
  padding: 0;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  display: block;
  width: 100%;
  margin-top: 1em;
  -webkit-transition: all 250ms;
  transition: all 250ms;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  resize: none;
}
.half {
  float: left;
  width: 48%;
  margin-bottom: 1em;
}
.right {
  width: 50%;
}
.left {
  margin-right: 2%;
}
.user-data:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}
section img:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}
@-webkit-keyframes loading {
  0%, 100% {
    margin-top: -50px;
    box-shadow: 0px 55px 40px 0px rgba(0, 0, 0, 0.3);
  }
  30%,
  80% {
    margin-top: 0px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
  }
}
@keyframes loading {
  0%, 100% {
    margin-top: -50px;
    box-shadow: 0px 55px 40px 0px rgba(0, 0, 0, 0.3);
  }
  30%,
  80% {
    margin-top: 0px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
  }
}
@media (max-width: 690px) {
  .half {
    width: 304px;
    float: none;
    margin-bottom: 0;
  }
}
/* Clearfix */

.activity-detail:before,
.activity-detail:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.activity-detail:after {
  clear: both;
}

<h1>New Activity Details</h1>
<section class="activity-detail">
  <div class="half right" id="image-data">
    <img src="img/default-avatar.png" alt="Profile Photo" style="width:304px;height:304px;" id="profile-photo">
    <a class="user-data" id="user-name">
      <div class="response-layer">Green Leaf</div>
    </a>
  </div>

  <div class="half left" id="general-data">
    <a class="user-data" id="user-action">
      <div class="response-layer" id="user-action-text">Greetings</div>
    </a>
    <a class="user-data" id="user-position">
      <div class="response-layer">Developer</div>
    </a>
    <a class="user-data" id="user-uuid">
      <div class="response-layer">324124535345</div>
    </a>
  </div>
</section>

在父 div .user-data 上，我将 display 更改为 table。

在子 div .response-layer(包含“Greetings”的那个)上，我将 display 更改为 table-cell。现在垂直对齐起作用了。

这是代码笔的链接:Codepen