WordPress的将一个div对齐到中心

Question

我编写了一个代码，其中<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

Answer 1

检查一下

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>

Answer 2

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上方申请谢谢