CODEWITHSUNDEEP
htmlcss
Benjamin Hoch
Benjamin Hoch

Reputation: 7

CSS cant position element within div

*{
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;
}
<center>
            <div class="back">
                    <div id="inline" class="square"></div><div id="inline" 
 class="text">square stuff</div>
                  </div>

So I am trying to position some text next to a box but directly to the left of it (middle left of the box) but top, bottom and text align have not worked... I just want it to appear right in the middle right of the box

By the Way, Here is my code above

Upvotes: 0

Views: 62

Answers (4)

aMJay
aMJay

Reputation: 2233

Add 

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

to your .back class:

*{
    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;
}
<center>
    <div class="back">
        <div id="inline" class="square"></div>
        <div id="inline" class="text">square stuff</div>
    </div>

Upvotes: 2

N. Mittal
N. Mittal

Reputation: 66

use the below css to set the text in middle.

vertical-align: middle;

Upvotes: 1

Giraj Paneri
Giraj Paneri

Reputation: 46

*{
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>

Upvotes: 0

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

Using line-height and vertical-align:middle you can make it align center

*{
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>

Upvotes: 0

Related Questions