我见过有人说不要使用< div align =“center”> Some Text< / div>和< center>一些文字< / center>因为它已经过时但我找不到任何CSS来对齐元素中的所有内容.我发现它最接近的是text-align：center;但这只是对齐文本,而不是元素.有没有允许你对齐元素的CSS？@H_404_6@
这是CSS.我想要集中的是#editor.这是< textarea>< / textarea>标签.@H_404_6@
@H_404_6@
@font-face {
font-family: Bandits;
src: url("Bandits.ttf");
font-weight: bold;
}
#editor {
position: absolute;
bottom: 35px;
left: 35px;
width: 800px;
height: 600px;
resize: none;
}
#see-result {
position: absolute;
top: 276px;
left: 425px;
width: 125px;
letter-spacing: 2.7px;
font-weight: bold;
background-color: #888;
text-align: center;
padding-top: 6.5px;
padding-bottom: 6.5px;
cursor: pointer;
font-family: Calibri;
} #see-result:hover {
background-color: #ABABAB;
}
header {
text-align: center;
font-size: 65px;
font-family: Bandits;
letter-spacing: 2px;
}最佳答案
要将框水平居中,您需要为其指定显式宽度,然后将其边距设置为“0 auto”：@H_404_6@
@H_404_6@
.container{
border:solid 2px lightblue;
width:600px;
height:400px;
}
.center{
border:solid 2px red;
height:200px;
/*centering CSS*/
width:200px;
margin:0 auto;
}Box is centereed
您还可以通过为其父容器提供中心的文本对齐值并使其显示来水平对齐框：内联：@H_404_6@
@H_404_6@
.container{
border:solid 2px lightblue;
width:600px;
height:400px;
text-align:center;
}
.center{
border:solid 2px red;
width:200px;
height:200px;
/*Centering CSS*/
display:inline;
text-align:center;
}
Box is centereed
最后,您可以使用flexBox在其父级中水平对齐块容器：@H_404_6@
@H_404_6@
.container{
border:solid 2px lightblue;
width:600px;
height:400px;
/*Centering CSS*/
display:flex;
justify-content:center;
}
.center{
border:solid 2px red;
width:200px;
height:200px;
}
Box is centereed
原文链接：https://www.f2er.com/html/425478.html
