Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jaspal Singh
Jaspal Singh
13,525 Points

How to align an element vertically and horizontally centered with Display table

I want to align the main heading(Exotic Wok & Grill) in the center of main header, horizontally and vertically. I have written down the following code but could not get the success. Pls help

HTML code:

<body> <div class="main-wrapper"> <div class="main-header group"> <div class="logo"> <img src="./images/logo2.png"> </div> <div class="main-heading"> <h1 class="name">Exotic- Wok and Grill</h1> </div> <div class="main-nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div>

CSS code::::

@media (min-width: 769px){

.main-container{
    max-width: 100%;
}

.logo,
.main-nav,
.main-nav li{
    float: left;
}
.main-header{
    position:relative;

}
.main-heading{
    display:table;
}
.name {
    text-shadow: 2px 2px 5px #535554;
    display: table-cell;
    vertical-align: middle;
    text-align: center;


}

.main-nav{
    position: absolute;
    right: 0;
    bottom: 0;
}

.main-nav a{ border:none; display: block; padding: 10px;

}

1 Answer

Arturo Perez
seal-mask
.a{fill-rule:evenodd;}techdegree
Arturo Perez
Front End Web Development Techdegree Student 12,902 Points
Arturo Perez
.a{fill-rule:evenodd;}techdegree
Arturo Perez
Front End Web Development Techdegree Student 12,902 Points

I would be able to help you more, if i where able to see your HTML.

But for now I would look into using flex-box.

It should be something like this:

main-header{ display: flex; justify-content: space-around; }

Assuming that your main-heading is the only child of your main-header , this should work. Don't add any position value to your main-heading. flex-box applies the values to its child elements.