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

Question

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

* {
    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;
}

<html>
<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>

score 0 · Accepted Answer · answered Feb 03 '23 at 03:40

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.

score 0 · Answer 2 · answered Feb 03 '23 at 03:49

Just use the flexbox model:

<header class="contenedor">
        <div class="logo">
            <p><a href="index.php">PAGE TITLE</a></p>
        </div>
  
      <div class="title">
        centered title
      </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>

CSS:

* {
    margin: 0;
}

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

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

header {
    background: gray ;
}

.contenedor {
    display: flex;
    align-items: center;
}

.title {
  flex-grow: 1;
  text-align: center;
}

header .contacto {
    display: inline-block;
}

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

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

score 0 · Answer 3 · answered Feb 03 '23 at 03:55

Welcome to stackoverflow @Aulmeies,

You should use either flex box or grid layout for header/nav bar, So it wil shrink to any device width and become responsive. Refer the changes i made.

MDN DOCS FOR FLEX

* {
    margin: 0;
}

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

.logo {
    text-align: center;
    flex:1; /* it makes to occupy the larger with than other */
    font-family: "Oswald";
    line-height: 70px;
}

header {
    background: gray ;
}

.contenedor {
    overflow: hidden;
    display:flex; /* flexbox layout */
}

.derecha {
    /*float: right; */
}

header .contacto {
    /*display: inline-block; */
    height:100%;
}

header .contacto ul {
    list-style: none;
    height:100%;
    display:flex;
    gap:5px;
}

header .contacto ul li {
  align-self:center;
  padding:10px;
}

<html>
<head>
</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>

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

3 Answers3