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

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 >
        <div >
            <p><a href="index.php">PAGE TITLE</a></p>
        </div>

        <div >
            <nav >
                <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;
}

CodePudding user response：

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.

CodePudding user response：

Just use the flexbox model:

<header >
        <div >
            <p><a href="index.php">PAGE TITLE</a></p>
        </div>
  
      <div >
        centered title
      </div>

        <div >
            <nav >
                <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;
}

CodePudding user response：

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 >
        <div >
            <p><a href="index.php">PAGE TITLE</a></p>
        </div>

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