Center Elements

HTML & CSS
1

Hello Again All!

I got such great feedback and advise when I post previously I thought I would come to discuss an issue im sure we all have…centering an element with css.

Here is the code;

    <body>
    
    <div class="wrapper">

    <header class ="mainHeader">
        
        <nav>
           <ul>
                <li><a id="port" class="active" href="/Portfolio">Portfolio</li></a>
                <li><a id="about" class="link" href="/About">About</a></li>
                <li><a id="exp" class="link" href="/Expertise">Expertise</a></li>
                <li><a id="proc" class="link" href="/Process">Process</a></li>
                <li><a id="cont" class="link" href="/Contact">Contact</a></li>
                <li><a id="heycorq" class="link" href="/heycorq">Blog</a></li>
           </ul>
        </nav>
        
        <aside class="logo"><img src="logo3-01.png" alt="Corq Media | Design and Development"></aside>
                
    </header>
                    
        
        <div class="content">
                    
            <article class ="imgGallery"><a class ="shrink" href="/Protfolio/brandi.php"><img src="thumbnail/brandi-boutique-thumb.jpg" height="310" width="355" /></a></article>
            <article class ="imgGallery"><a class ="shrink" href="/Protfolio/kartoon.php"><img src="thumbnail/kartoon-thumb.jpg" height="310" width="355" /></a></article>
            <article class ="imgGallery"><a class ="shrink" href="/Protfolio/coffee-bean.php"><img src="thumbnail/coffee-bean-thumb.jpg" height="310" width="355" /></a></article>
            <article class ="imgGallery"><a class ="shrink" href="/Protfolio/costawurks-design.php"><img src="thumbnail/costawurks-design.jpg" height="310" width="355" /></a></article> 
            <article class ="imgGallery"><a class ="shrink" href="/Protfolio/dek-landscaping.php"><img src="thumbnail/landscape-thumb.jpg" height="310" width="355" /></a></article>
            <article class ="imgGallery"><a class ="shrink" href="/Protfolio/media-guyd.php"><img src="thumbnail/media-guyd-thumb.jpg" height="310" width="355" /></a></article> 
            <article class ="imgGallery"><a class ="shrink" href="img/pitas-and-sticks.jpg"><img src="thumbnail/pita-thumb.jpg" height="310" width="355" /></a></article>
            <article class ="imgGallery"><a class ="shrink" href="img/humble-and-harris.jpg"><img src="thumbnail/humble-thumb.jpg" height="310" width="355" /></a></article> 
            <article class ="imgGallery"><a class ="shrink" href="/Protfolio/saturday-mornings.php"><img src="thumbnail/saturday-mornings-thumb.jpg" height="310" width="355" /></a></article>
            <article class ="imgGallery"><a class ="shrink" href="/Protfolio/sparkle.php"><img src="thumbnail/sparkle-thumb.jpg" height="310" width="355" /></a></article>
            <article class ="imgGallery"><a class ="shrink" href="/Protfolio/yatch.php"><img src="thumbnail/yatch.jpg" height="310" width="355" /></a></article>
        
        </div>

The above is a snippet of my HTML

    body {
    background-image: url(img/bg-img/2H.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat; }

.wrapper {
    width: 80%;
    margin: 0 auto;
}

.mainHeader {
    width: 100%;   
}

.mainHeader img {
    width: 288px;
    height: 200px;
    margin: 0 auto;
}

.mainContent {
    width: 100%;   
}

.content {
    width: 100%;
}

.imgGallery {
    display: inline;
    margin: 0 auto;
}

This would be my CSS (I apologize as I cannot seem to get it to display correctly.

Never the less;

What I am trying to do is center .content with the .wrapper (the .wrapper is already centered with the body of the page however I cannot get the other items to center (contents, logo, etc))

Any information would be great! Thank you,

2

.content is 100% width so how can you center it? I’m confused. An element that takes the full width of hte parent cannot be centered. Do you wnat the content inside of it centered? Or the actual .content…?

You can center the insides with text-align:center; but that will only center the inline elements (e.g. <img> etc). That’s a unique design choice to have everything centered. Are you sure that’s what you want?

3

AS Ryan said it’s a little hard to second guess here but if you want to center widthless items you can do it with inline-block like this.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrapper {
    width:80%;
    margin:auto;
    background:#f9f9f9;
}
ul {
    margin:0;
    padding:0;
    list-style:none;
}
nav {
    text-align:center
}/* center inline block elements (and text)*/
.nav ul {
    display:inline-block;
    vertical-align:middle;
    text-align:left;/* reset text */
}
.nav ul li {
    display:inline-block;
    vertical-aligbn:top;
}
.nav li a {
    display:block;
    border:1px solid #000;
    padding:10px 20px
}
</style>
</head>

<body>
<div class="wrapper">
        <nav class="nav">
                <ul>
                        <li><a id="port" class="active" href="/Portfolio">Portfolio</a></li>
                        <li><a id="about" class="link" href="/About">About</a></li>
                        <li><a id="exp" class="link" href="/Expertise">Expertise</a></li>
                        <li><a id="proc" class="link" href="/Process">Process</a></li>
                        <li><a id="cont" class="link" href="/Contact">Contact</a></li>
                        <li><a id="heycorq" class="link" href="/heycorq">Blog</a></li>
                </ul>
        </nav>
</div>
</body>
</html>

Or with the display table and table-cell properties.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrapper {
    width:80%;
    margin:auto;
    background:#f9f9f9;
}
ul {
    margin:0;
    padding:0;
    list-style:none;
}

.nav ul {
    display:table;
    margin:auto;
    text-align:left;
}
.nav ul li {
    display:table-cell;
    vertical-aligbn:top;
}
.nav li a {
    display:block;
    border:1px solid #000;
    padding:10px 20px
}
</style>
</head>

<body>
<div class="wrapper">
        <nav class="nav">
                <ul>
                        <li><a id="port" class="active" href="/Portfolio">Portfolio</a></li>
                        <li><a id="about" class="link" href="/About">About</a></li>
                        <li><a id="exp" class="link" href="/Expertise">Expertise</a></li>
                        <li><a id="proc" class="link" href="/Process">Process</a></li>
                        <li><a id="cont" class="link" href="/Contact">Contact</a></li>
                        <li><a id="heycorq" class="link" href="/heycorq">Blog</a></li>
                </ul>
        </nav>
</div>
</body>
</html>
1 Like
4

Hi Ryan,

I see your point with regards to the width of the element, I am going to play around with that abit and see what I can come up with.

With regards to having everything centered is because when resizing the screen to be suitable for a mobile device, the contents I am trying to center is actually a portfolio in a tile form. The size of the screen limits the portfolio to only show one image in a row however it is off center.

That is the reason as to why I was looking to center everything.

6

The code I gave you above will do that :slight_smile:

1 Like
7

Would that work for the .content elements ( <article> ) as well?

Thank you for the assistance in advanced btw :smile:

8

You should be able to adapt it to fit your code.

9

I have been playing with the text, would this only work if I made the tiles in a ul? or could I still keep it as the <articles>. The reason I have it without the ul at the moment is because I was originally having issues with evening out the spacing between each li.

10

Correction I DID IT!!!

I just played around more and it worked!!!

Thank you guys!!

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.