我正在尝试为用户个人资料处理以下example。
我的各个领域的文字都有问题。我希望它们水平和垂直居中。
使用
vertical-align: middle;
对我不起作用,或者我做错了什么。
我怎样才能使每个文本片段完全集中在各自的容器上?
答案 0 :(得分: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>
&#13;
在父级.user-data
上,我将display
更改为table
。
在子div .response-layer
(包含&#34; Greetings&#34;的那个)上,我将display
更改为table-cell
。现在垂直对齐有效。
这是指向codepen的链接:Codepen
答案 1 :(得分:0)
更换
strict_version_check=False
带
vertical-align: middle;
诀窍。
编辑:上面的答案更清晰