content not staying in a circle div

Question

I am unable to keep my content in my div that is a circle. The html jumps out of its container and tries to align itself to what the image is inside it. Any ideas on how to keep it in there? I am using Google Chrome.

Thank you in advance!

Love knowing I can come here and ask my 500 closest online friends for help.

<div class="wrapper">
<div class="logo">
    <div style="padding-top: 3%;">
        <p class="RST" data-height="50" style="line-height: 90%;">welcome</p>
        <p  class="RST" data-height="50" style="font-weight: bold; line-height: 90%">manager</p>
    </div>
</div>

    <div class="square teal" style="width: 50%; height: 27.5%; float:left;">
        <img src="img/dollar.png"/>
        <p class="RST" data-height="20";>rent<br>managment</p>
    </div>

    <div class="square lightGreen" style="width: 50%; height: 27.5%; float:right;">
        <img src="img/tenant.png"/>
        <p class="RST" data-height="20";>tenant<br>managment</p>
    </div>


    <div class="square lightGreen" style="width: 50%; height: 27.5%; float:left;">
        <img src="img/wrench.png"/>
        <p class="RST" data-height="20";>manage<br>managment</p>
    </div>

    <div class="square teal" style="width: 50%; height: 27.5%; float:right;">
        <img src="img/pages.png"/>
        <p class="RST" data-height="20";>contract<br>managment</p>
    </div>

<div class="circle">
    <p>center<br>picture</p>
</div>

*{
    margin: 0px;
    padding: 0px;
}

#mainWrapper{
    background-image: url('../img/wheat.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    font-family: 'Didact Gothic', sans-serif;
    letter-spacing: 2px;
    width: 100%;
    height: 100%;
}

.wrapper{
    position: absolute;
    left: 32%;
    right: 32%;
    top: 5%;
    bottom: 10%;
    text-align: center;
    height: 466.2px;
}

.logo{
    width: 100%;
    height: 25%;
    color: #4a9682;
}

.logo img{
    height: 95%;
}

.logoP{
    line-height: .8;
}

.generalBox{
    width: 100%;
    color: rgba(255,255,255,0.5);
    outline: 0px solid transparent;
    vertical-align:middle;
    padding-top: 4%;
    padding-bottom: 2%;
}

.generalBox img{
    height: 75%;
    opacity: 0.5;
}

.generalBox p{
    display: inline;
    position: relative;
    bottom: 15%;
    left: 1%;
}

.square{
    color: rgba(255,255,255,0.5);
    outline: 0px solid transparent;
    vertical-align:middle;
    padding-top: 4%;
    padding-bottom: 2%;
}

.square img{
    height: 60%;
    opacity: 0.5;
}

.circle{
    background-image: url('../img/nial.png');
    width: 20%;
    height: 22.5%;
    border-radius: 100%;
    position: relative;
    top:23%;
    left: 40%;
    border-style: solid;
    border-width: 5px;
    border-color:rgba(255, 255, 255,0.9);
    background-size: 100%;
    background-repeat: no-repeat;
}

.circle p{
    font-size: 10px;
    display: inline-block;       
}

/****************************************
 Colors
*****************************************/
.teal{background-color:rgba(82,131,158,0.9);}
.purple{background-color:rgba(113,141,197,0.9);}
.lightBlue{background-color:rgba(140,220,239,0.9);}
.darkGreen{background-color:rgba(109,179,175,0.9);}
.lightGreen{background-color:rgba(76,201,182,0.9);}
.

.signUp{
    width: 100%;
    height: 10%;

}

Answer 1

Add/change the following property values.

.circle{
 display: table;
}

.circle p{
    display: table-cell;
    vertical-align: middle;
}