我已经制作了一个代码,其中<div>
必须在中心对齐。所有div
确实只在codepen中对齐,但在wordpress中没有。所以请看下面的代码。它也必须适用于wordpress。代码如下: -
body{
align-items: center;
justify-content: center;
}
.header{
padding:2%;
display: flex;
align-items: center;
justify-content: center;
}
.element1, .element2, .element3, .element4, .element5, .element6 {
display: inline-block;
background: -webkit-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
background: -o-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */
border-radius:15%;
max-height: 100px;
width: 8%;
font-family:"Nuntino";
color: white;
opacity: 0.7;
text-align:center;
display:flex;
align-items: center;
justify-content: center;
}
<div class="header" id="header">
<p> <div id="element1" class="element1"><font style="font-size:3vw;" size="72px"><h1>Y</h1></font></div>
<div class="element2"><font size="72px" style="font-size:3vw;" ><h1>O</h1></font></div>
<div class="element3"><font size="72px" style="font-size:3vw;" ><h1>J</h1></font></div>
<div class="element4"><font size="72px" style="font-size:3vw;"><h1>A</h1></font></div>
<div class="element5"><font size="72px" style="font-size:3vw;"><h1>N</h1></font></div>
<div class="element6"><font size="72px" style="font-size:3vw;" ><h1>A</h1></font></div>
</div
检查一下,
body {
display: flex;
align-items: center;
justify-content: center;
}
.element1,
.element2,
.element3,
.element4,
.element5,
.element6 {
display: inline-block;
background: -webkit-linear-gradient(90deg, #16222A 10%, #3A6073 90%);
/* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #16222A 10%, #3A6073 90%);
/* FF3.6+ */
background: -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%);
/* IE10 */
background: -o-linear-gradient(90deg, #16222A 10%, #3A6073 90%);
/* Opera 11.10+ */
background: linear-gradient(90deg, #16222A 10%, #3A6073 90%);
/* W3C */
border-radius: 15%;
max-height: 100px;
width: 8%;
font-family: "Nuntino";
color: white;
opacity: 0.7;
text-align: center;
}
<div id="element1" class="element1">
<font style="font-size:3vw;" size="72px">
<h1>Y</h1>
</font>
</div>
<div class="element2">
<font size="72px" style="font-size:3vw;">
<h1>O</h1>
</font>
</div>
<div class="element3">
<font size="72px" style="font-size:3vw;">
<h1>J</h1>
</font>
</div>
<div class="element4">
<font size="72px" style="font-size:3vw;">
<h1>A</h1>
</font>
</div>
<div class="element5">
<font size="72px" style="font-size:3vw;">
<h1>N</h1>
</font>
</div>
<div class="element6">
<font size="72px" style="font-size:3vw;">
<h1>A</h1>
</font>
</div>
body {
display: flex;
align-items: center;
justify-content: center;
}
.element1,
.element2,
.element3,
.element4,
.element5,
.element6 {
display: inline-block;
background: -webkit-linear-gradient(90deg, #16222A 10%, #3A6073 90%);
background: -moz-linear-gradient(90deg, #16222A 10%, #3A6073 90%);
background: -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%);
background: -o-linear-gradient(90deg, #16222A 10%, #3A6073 90%);
background: linear-gradient(90deg, #16222A 10%, #3A6073 90%);
border-radius: 15%;
max-height: 100px;
width: 8%;
font-family: "Nuntino";
color: white;
opacity: 0.7;
text-align: center;
}
你可以申请上面的CSS谢谢