将DIV放在DIV中

Question

Hello i have a next html code and CSS:

 html, body { height: 100%; padding: 0; margin: 0; } .teaser { width: 100%; height: 25vh; background-image: url("http://www.1zoom.me/big2/365/321125-alexfas01.jpg"); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } a.menuButton { padding: 0; margin: 0; width: 49.7%; height: 33.33%; float: left; background-color: white; border-collapse: collapse; border: 1px solid #E6F0F0; text-decoration: none; position: relative; color: black; } .rectangle { padding: 0; width: 70px; height: 7px; background: blue; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .menuButtonContent { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 0; height: 50%; width: 50%; background-color: red; margin: auto; } .menuButtonContent h1 { text-align: center; } .buttonsWrapper { width: 100%; height: 73vh; } .rectangle#citizenship { background-color: #38CCBA; } .rectangle#fastsearch { background-color: #00899B; } .rectangle#forillegals { background-color: #D80C00; } .rectangle#soonillegals { background-color: #FF8A00; } .rectangle#aboutapp { background-color: #B8B8B8; } .rectangle#settings { background-color: #626262; } 

 <div class="teaser"></div> <div class="buttonsWrapper"> <a class="menuButton" href="#"> <div class="menuButtonContent"> <h1>Citizenship</h1> <div class="rectangle" id="citizenship"></div> </div> </a> <a class="menuButton" href="#"> <div class="menuButtonContent"> <h1>Fast search</h1> <div class="rectangle" id="fastsearch"></div> </div> </a> <a class="menuButton" href="#"> <div class="menuButtonContent"> <h1>For illegals</h1> <div class="rectangle" id="forillegals"></div> </div> </a> <a class="menuButton" href="#"> <div class="menuButtonContent"> <h1>Soon illegals</h1> <div class="rectangle" id="soonillegals"></div> </div> </a> <a class="menuButton" href="#"> <div class="menuButtonContent"> <h1>About app</h1> <div class="rectangle" id="aboutapp"></div> </div> </a> <a class="menuButton" href="#"> <div class="menuButtonContent"> <h1>Settings</h1> <div class="rectangle" id="settings"></div> </div> </a> </div> 

I have 2 problems:

1) I cannot find an apropriate solution to center the .menuButtonContent, it is centered horizontaly, but not vertically, on some screen sizes it gets centered vertically, but not at all - how can i center it?

2) The background-image: url doesn't get rendered, why?

Answer 1

To make an element vertically align centered, set the display property of the parent element as display:table; then set the element that has to be centered as display:table-cell; and vertical-align:midlle; .

.parent{
    display:table;
}

.child-element-centered{
   display:table-cell;
   vertical-align:midlle;
}

Answer 2

Try using the calc() function in CSS

lets say the parent div is called "a" and its child was "b"

<div id="a" style="width:400px;height:400px;position:relative;">
     <div id="b" style="position:relative;top:calc(25% - 100px);left:calc(25% - 100px);width:50%;height:50%;"></div>
</div>

Answer 3

first set the display of child divs to inline-block

then set the parent text-align to center . This will horizontally center your divs

and then use a "hack" to accomplish vertically aligning your child divs. See this fiddle for an example