div中的CSS cant位置元素

Question

＆＃13;

＆＃13;

*{
margin: 0;
}

.square {
height: 50px;
width: 50px;
background-color: red;
transition: all 2s;
}
.square:hover {
transform:rotate(360deg)
}
#inline {
display: inline-block;
position: relative;
top:2.2px;
}
.back {
background-color: #E8E8E8;



	
}
.text {
position: relative;
left: 10px;
top: 100px;
font-size:170%;
font-family: Arial, Helvetica, sans-serif;
color: #CF5757;
}
.square:active , .text:active{
height:100px;
transform: rotate3d(0.9, 0.1, 1, -90deg);
width:100px;
background-color: darkorchid;
}

＆＃13;

<center>
            <div class="back">
                    <div id="inline" class="square"></div><div id="inline" 
 class="text">square stuff</div>
                  </div>

＆＃13;

＆＃13;

＆＃13;

所以我试图将一些文本放在一个框旁边，但是直接放在它的左边（框的左上方），但顶部，底部和文本对齐都没有用...我只是希望它出现在框的中间右侧

顺便说一下，这是我上面的代码

Answer 1

添加

display:flex;
justify-content:center;
align-items:center;

到您的.back班级：

＆＃13;

＆＃13;

*{
    margin: 0;
}

.square {
    height: 50px;
    width: 50px;
    background-color: red;
    transition: all 2s;
}
.square:hover {
    transform:rotate(360deg)
}

#inline {
    display: inline-block;
    position: relative;
    top:2.2px;
}

.back {
    background-color: #E8E8E8;
    display:flex;
    justify-content:center;
    align-items:center;
}

.text {
    position: relative;
    left: 10px;
    top: 100px;
    font-size:170%;
    font-family: Arial, Helvetica, sans-serif;
    color: #CF5757;
}

.square:active , .text:active{
    height:100px;
    transform: rotate3d(0.9, 0.1, 1, -90deg);
    width:100px;
    background-color: darkorchid;
}

＆＃13;

<center>
    <div class="back">
        <div id="inline" class="square"></div>
        <div id="inline" class="text">square stuff</div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用下面的css将文本设置在中间。

vertical-align: middle;

Answer 3

使用line-height和vertical-align:middle可以使其对齐中心

*{
margin: 0;
}

.square {
height: 50px;
width: 50px;
background-color: red;
transition: all 2s;
}
.square:hover {
transform:rotate(360deg)
}
#inline {
display: inline-block;
position: relative;
top:0px;
vertical-align:middle;
}
.back {
background-color: #E8E8E8;
}
.text {
position: relative;
line-height: 50px;
padding-left:10px;
font-size:170%;
font-family: Arial, Helvetica, sans-serif;
color: #CF5757;
}
.square:active , .text:active{
height:100px;
transform: rotate3d(0.9, 0.1, 1, -90deg);
width:100px;
background-color: darkorchid;
}

         <center>
    			   <div class="back">
    					<div id="inline" class="square"></div><div id="inline"  class="text">square stuff</div>
    				 </div>
         </center>

Answer 4

*{
margin: 0;
}

.square {
height: 50px;
width: 9%;
margin-left:41%;
background-color: red;
transition: all 2s;
}
.square:hover {
transform:rotate(360deg)
}
#inline {
display: inline-block;
position: relative;
top:2.2px;
}
.back {
background-color: #E8E8E8;
  width: 100%;
}
.text {
    width: 50%;
    float: right;
     left: 8px;
    top: 100px;
    font-size: 170%;
    font-family: Arial, Helvetica, sans-serif;
    color: #CF5757;
    margin: 8px auto;
}
.square:active , .text:active{
height:100px;
transform: rotate3d(0.9, 0.1, 1, -90deg);
width:100px;
background-color: darkorchid;
}

 <div class="back">
    <div id="inline" class="square">
      
    </div><div id="inline" class="text">square stuff</div>
                  </div>