how do I stop a conflict between inline-block and text align?

Advertisements

I am trying to make a simple top bar

as a way to put things I’ve been learning into practice so I’m not exactly looking for a work around as much as I am looking to understand what is happening and fixing it so I can apply my recently learned knowledge.
(sorry if this can come out as rude)

visually speaking it should be something like this:

||_______________________centered-title___________button1__button2||

but I am unable to center the title properly.
After I added the inline block to the centered title I am unable to move it from the left as text align stopped having a effect on it

here is my code

html

</head>
<body>
    <header class="contenedor">
        <div class="logo">
            <p><a href="index.php">PAGE TITLE</a></p>
        </div>

        <div class="derecha">
            <nav class="contacto">
                <ul>
                    <li><a href="#">SOCIALS 1</a></li>
                    <li><a href="#">SOCIALS 2</a></li>
                </ul>
            </nav>
        </div>
    </header>
</body>
</html>

CSS

* {
    margin: 0;
}

body {
    background: rgb(15, 17, 26);
}

.logo {
    text-align: center;
    display: inline-block;
    font-family: "Oswald";
    line-height: 70px;
}

header {
    background: gray ;
}

.contenedor {
    overflow: hidden;
}

.derecha {
    float: right;
}

header .contacto {
    display: inline-block;
}

header .contacto ul {
    list-style: none;
}

header .contacto ul li {
    display: inline-block;
    line-height: 70px;
}

>Solution :

When you change an element to inline-block it no longer occupies the full width of its container—-it becomes the width of its contents.

text-align ceases to have a visible effect because you’re “centering” it within an area that’s the same width as the content.

You can see this in the browser’s dev tools by inspecting the relevant element, or by placing a border on the element.

I’d strongly recommend you look into CSS flexbox and CSS grid for arranging elements in predictable ways.

Leave a ReplyCancel reply