CSS Center Buttons

Hello All,

I am learning CSS at the moment but I have run into a small issue at present I am having issues trying to center my two buttons as can been seen in my screenshot, I have checked my Code and I am not able to see what I am doing wrong, I would be grateful for your advice?

<div class="row">
                <div class="hero-text-box">
                    <h1>— IT & Network Consultant —</h1>
                    <p>Linux — Cisco — Windows</p>
                    <a class="btn btn-full" href="#">Contact Me </a>
                <a class="btn btn-ghost" href="#">Download My CV</a>
                    
                </div>
            </div>
.hero-text-box {
    position: absolute;
    width: 1140px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    
    
}
.hero-text-box h1,
.hero-text-box p {
    text-align: center;
    color: #fff;
}

Many Thanks

If everything in hero-text-box is to be centred you may be better with:-

hero-text-box {
   text-align: center;
}

Or just wrap the anchors in <p> tags.

Off topic: I don’t like this much:-

Where are you are learning this?

Hi SamA74,

Thanks for your response and advice, what is wrong in learning the section that you pointed out?

Joe

width: 1140px;

Fixed widths are best avoided as such a size will not fit on a great many devices, keep things fluid, max-width would be a better option.

position: absolute;

Also absolute positioning is something generally best avoided most of the time.

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