horitzontal align slightly off center

Question

I have a link that I've tried to center using text-align:center and display:inline-block but it appears to be slightly off center. I've included pics and my code down below. Any help would be great, Thanks! The that is giving me trouble is under the class "button"

pic: https://i.stack.imgur.com/mFagF.jpg

HTML:

    <div class="headerContent">

        <nav>

            <ul class="navDown">  
                <li><a href="#">Intro</a></li>  
                <li><a href="#windSection">Wind</a></li>  
                <li><a href="#solarSection">Solar</a></li>  
                <li><a href="#nuclearSection">Nuclear</a></li>  
                <li><a href="#endSection">End</a></li>     
            </ul>

            <a href="#" class="menu-icon"><p class="menu"></p></a>

        </nav>

        <a href="#" class="scrollup">Scroll</a>
        <a href="#windSection" class="scrolldown">Scroll</a>

        <h1 class="title bigTitle">Going Green.</h1>

        <p class="headerText">
            A change is coming- and that change will be making the switch to green forms of energy.  If you are interested in learning how you can help the environment and save money over time- you have come to the right place. It is time to Energize Change.  <br><span class="emphasis">Click below to find the perfect green energy source for you and your family!</span>
        </p>

        <p class= "noElechouse"></p>

        <div class="select">

            <a class="button" href="links/calculator.html">Find Now</a>

        </div>

    </div>

CSS:

.headerContent {
    position:relative;
    width:55%;
    margin:auto;
    height:100%;
    text-align:center;

}

.title {
    font-family: 'Oxygen', sans-serif;
    font-weight:700;
    color:white;
    font-size:90px;
    padding-bottom:15px;
    padding-top:15px;
}

.headerText {
    position:absolute;
    bottom:35%;
    font-family: 'Oxygen', sans-serif;
    font-weight:400;
    font-size:18px;
    line-height:27px;
    width:90%;
    margin:auto;
    display:block;
    left:0;
    right:0;
}

.select {
    text-align:center;
}

.button {
    position:absolute;
    display:inline-block;
    font-family: 'Oxygen', sans-serif;
    font-weight:normal;
    font-size:30px;
    color:white;
    bottom:10px;
    text-decoration:none;
    padding: 10px 20px;
}

can u post an isolated sample on jsfiddle.net? – Yuriy Galanter Dec 27 '13 at 19:37 — Yuriy Galanter, Dec 27 '13 at 19:37

score 3 · Answer 1 · edited Apr 11 '15 at 15:34

3

I could completely center it when using

nav ul{
    padding: 0;
}

edited Apr 11 '15 at 15:34

Bowdzone

3,827
11
39
52

answered Apr 11 '15 at 14:42

Tony

31
2

Simplest solution! – Kinman Jul 29 '17 at 21:28

brouxhaha · Answer 2 · 2013-12-27T19:46:22.807

display: inline-block adds extra white-space to elements. There are some fixes for this (http://css-tricks.com/fighting-the-space-between-inline-block-elements/). I would recommend the "Set font size to 0 on parent" option for you since you don't have multiple items next to each other and you already have a font-size set on .button.

.select {
    font-size: 0;
}

You also have position: absolute set on .button. Remove that as well. If you actually need it positioned absolutely, I would recommend positioning the containing div.

Here's a Demo

OR you could just remove display: inline-block from .button.

score 1 · Accepted Answer · edited May 23 '17 at 12:06

1

Your main issue is with the usage of inline-block, which actually adds about 4px worth of space to the left. To remove this, either add -4px to your margins for the element, or as brouxhaha suggested, you can set the font-size to zero for the parent, and then reset it to whatever value you desire for the .button elements.

If you want more information regarding the inline-block issue, check this question I answered a few months ago: CSS Inline-block Dimension Discrepancies

edited May 23 '17 at 12:06

Community

1
1

answered Dec 27 '13 at 19:43

Shrey Gupta

5,509
8
45
71

the padding won't affect it since it's equal on both sides. – brouxhaha Dec 27 '13 at 19:44
Thanks brouxhaha, didn't see the padding was on both sides. I'll fix that ASAP. – Shrey Gupta Dec 27 '13 at 19:46
for some reason I had to add a margin of -100 before it was centered. Any idea why? – kduan Dec 27 '13 at 19:56
Hmm...I'll need to see what you're talking about. Can you show me where you got the `-100` from? – Shrey Gupta Dec 27 '13 at 20:11
No idea, I tried -4px and it only moved slightly so I put in -100px and it magically centered its self – kduan Dec 27 '13 at 20:33
In that case, you have another problem. I tried to replicate your code in my own browser, and I didn't see any button or anything green, which your image showed. – Shrey Gupta Dec 27 '13 at 21:36

horitzontal align slightly off center

3 Answers3