Question 45528 in CSS Question posted in
Some basic documentation can be found here.

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

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>
Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search