如何在 box/container 中水平和垂直居中对齐文本?
How to center align text horizontally and VERTICALLY in a box/container?
我正在尝试创建一个如下所示的网页:
Download page
我与 bootstrap 一起工作并创建了行以将三个下载选项彼此对齐。然后,我在这些行中创建了容器(以复制框)并将文本和下载图标水平居中对齐。不幸的是,我不确定如何在容器中垂直居中对齐文本和图标。任何人都可以帮忙吗?我当前的设计如下所示:
我的代码如下:
.download {
font: Verdana, Helvetica, Arial, sans-serif;
color: RGB(112, 112, 112);
font-size: 18px;
text-align: center;
padding: 5px;
}
.download:hover {
color: rgb(227, 111, 30);
cursor: pointer;
}
#download-icon {
font-size: 80px;
float: left;
}
.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
}
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="container-border">
<i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
<p class="download"> Download list of charities that have <b> not submitted </b> data yet </p>
</div>
</div>
</div>
</div>
编辑:感谢大家的回答!我真的很感激他们。对我来说,只需调整我的内容边框 class 即可:
.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
display: flex;
align-items: center;
/* vertical center */
}
将 display: flex;align-items: center;
添加到 .container-border
.container-border{
border-style:solid;
border-color: rgb(0,143,197);
padding: 5px;
min-height:120px;
display: flex;
align-items: center;
}
我会用 flexbox
作为 container-border
class。在这种情况下,您可以删除浮动。
.download {
font: Verdana, Helvetica, Arial, sans-serif;
color: RGB(112, 112, 112);
font-size: 18px;
padding: 5px;
text-align: center;
}
.download:hover {
color: rgb(227, 111, 30);
cursor: pointer;
}
#download-icon {
font-size: 80px;
}
.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
display: flex;
align-items: center;
/* vertical center */
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="container-border">
<i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
<p class="download"> Download list of charities that have <b> not submitted </b> data yet </p>
</div>
</div>
</div>
</div>
您不需要使用 FlexBox 使事情复杂化。请使用这样的东西,table 布局或 line-height
和 vertical-align
组合:
.download {
font: Verdana, Helvetica, Arial, sans-serif;
color: RGB(112, 112, 112);
font-size: 18px;
text-align: center;
padding: 5px;
}
.download:hover {
color: rgb(227, 111, 30);
cursor: pointer;
}
#download-icon {
font-size: 80px;
vertical-align: middle;
line-height: 120px;
}
#download-icon + span {
vertical-align: middle;
line-height: 1;
}
.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="container-border">
<i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
<span class="download"> Download list of charities that have <b> not submitted </b> data yet </span>
</div>
</div>
</div>
</div>
预览
为什么不设置一个填充:
.download {
font: Verdana,Helvetica,Arial,sans-serif;
color: RGB(112,112,112);
font-size:18px;
text-align:center;
/* padding: 5px; <- removed */
padding: 12px 5px 5px 5px; /* New */
}
#download-icon {
font-size:80px;
float:left;
padding-top: 10px; /* New */
}
.container-border {
border-style:solid;
border-color: rgb(0,143,197);
padding: 5px;
min-height:120px;
width: 300px; /* New*/
}
演示:
.download {
font: Verdana,Helvetica,Arial,sans-serif;
color: RGB(112,112,112);
font-size:18px;
text-align:center;
/* padding: 5px; <- removed */
padding: 12px 5px 5px 5px; /* New */
}
.download:hover {
color: rgb(227,111,30);
cursor: pointer;
}
#download-icon {
font-size:80px;
float:left;
padding-top: 10px; /* New */
}
.container-border {
border-style:solid;
border-color: rgb(0,143,197);
padding: 5px;
min-height:120px;
width: 300px; /* New*/
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="container-border">
<i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
<p class="download"> Download list of charities that have <b> not submitted </b> data yet </p>
</div>
</div>
</div>
</div>
我正在尝试创建一个如下所示的网页:
Download page
我与 bootstrap 一起工作并创建了行以将三个下载选项彼此对齐。然后,我在这些行中创建了容器(以复制框)并将文本和下载图标水平居中对齐。不幸的是,我不确定如何在容器中垂直居中对齐文本和图标。任何人都可以帮忙吗?我当前的设计如下所示:
我的代码如下:
.download {
font: Verdana, Helvetica, Arial, sans-serif;
color: RGB(112, 112, 112);
font-size: 18px;
text-align: center;
padding: 5px;
}
.download:hover {
color: rgb(227, 111, 30);
cursor: pointer;
}
#download-icon {
font-size: 80px;
float: left;
}
.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
}
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="container-border">
<i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
<p class="download"> Download list of charities that have <b> not submitted </b> data yet </p>
</div>
</div>
</div>
</div>
编辑:感谢大家的回答!我真的很感激他们。对我来说,只需调整我的内容边框 class 即可:
.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
display: flex;
align-items: center;
/* vertical center */
}
将 display: flex;align-items: center;
添加到 .container-border
.container-border{
border-style:solid;
border-color: rgb(0,143,197);
padding: 5px;
min-height:120px;
display: flex;
align-items: center;
}
我会用 flexbox
作为 container-border
class。在这种情况下,您可以删除浮动。
.download {
font: Verdana, Helvetica, Arial, sans-serif;
color: RGB(112, 112, 112);
font-size: 18px;
padding: 5px;
text-align: center;
}
.download:hover {
color: rgb(227, 111, 30);
cursor: pointer;
}
#download-icon {
font-size: 80px;
}
.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
display: flex;
align-items: center;
/* vertical center */
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="container-border">
<i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
<p class="download"> Download list of charities that have <b> not submitted </b> data yet </p>
</div>
</div>
</div>
</div>
您不需要使用 FlexBox 使事情复杂化。请使用这样的东西,table 布局或 line-height
和 vertical-align
组合:
.download {
font: Verdana, Helvetica, Arial, sans-serif;
color: RGB(112, 112, 112);
font-size: 18px;
text-align: center;
padding: 5px;
}
.download:hover {
color: rgb(227, 111, 30);
cursor: pointer;
}
#download-icon {
font-size: 80px;
vertical-align: middle;
line-height: 120px;
}
#download-icon + span {
vertical-align: middle;
line-height: 1;
}
.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="container-border">
<i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
<span class="download"> Download list of charities that have <b> not submitted </b> data yet </span>
</div>
</div>
</div>
</div>
预览
为什么不设置一个填充:
.download {
font: Verdana,Helvetica,Arial,sans-serif;
color: RGB(112,112,112);
font-size:18px;
text-align:center;
/* padding: 5px; <- removed */
padding: 12px 5px 5px 5px; /* New */
}
#download-icon {
font-size:80px;
float:left;
padding-top: 10px; /* New */
}
.container-border {
border-style:solid;
border-color: rgb(0,143,197);
padding: 5px;
min-height:120px;
width: 300px; /* New*/
}
演示:
.download {
font: Verdana,Helvetica,Arial,sans-serif;
color: RGB(112,112,112);
font-size:18px;
text-align:center;
/* padding: 5px; <- removed */
padding: 12px 5px 5px 5px; /* New */
}
.download:hover {
color: rgb(227,111,30);
cursor: pointer;
}
#download-icon {
font-size:80px;
float:left;
padding-top: 10px; /* New */
}
.container-border {
border-style:solid;
border-color: rgb(0,143,197);
padding: 5px;
min-height:120px;
width: 300px; /* New*/
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="container-border">
<i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
<p class="download"> Download list of charities that have <b> not submitted </b> data yet </p>
</div>
</div>
</div>
</div>