CODEWITHSUNDEEP
htmlcssvertical-alignment
koowalsky
koowalsky

Reputation: 331

Centered header with button in the same line

I want to create a CENTERED header with button on right.
I already have something like this:

h1{
  text-align : center;
  margin-right : 32px;
}

button{
  position: absolute;
  top: 32px;
  right: 32px;
}
<html>
<body>
<div><h1>test</h1><button style="float: right;">test</button></div>
<div style="text-align: center;">text</div>
</body>
</html>

but in this case header isn't centered to full width page.
also, if header is too long it should not cover button..

Thank you for reading!

Upvotes: 7

Views: 19351

Answers (3)

Pranjal
Pranjal

Reputation: 1128

Try this

        .div-header{
            width: 95%;
            float: left;
            text-align: center;
        }
        .div-btn{
            width: 5%;
            float: left;
        }
    <div class="div-main">
        <div class="div-header">
             <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ</p></div>
        <div class="div-btn"><button>Button</button></div>
    </div>

Upvotes: 0

kukkuz
kukkuz

Reputation: 42362

If flexbox is an option, you can center the h1 and position the button to the right:

div {
  display: flex;
  justify-content: center;
  position: relative;
}
h1 {
  text-align: center;
}
button {
  position: absolute;
  right: 0;
}
<div>
  <h1>test</h1>
  <button>test</button>
</div>

Cheers!

Upvotes: 12

marcobiedermann
marcobiedermann

Reputation: 4923

You could solve this by using flex-box or floats. You also have to slightly modify your markup.

<div class="header">
  <h1>Headline</h1>
  <button>Button</button>
</div>

FlexBox:

.header {
  display: flex;
}

.header h1 {
  flex-grow: 1;
}

.header button {
  margin-left: 20px;
}

Floats:

.header {
  overflow: hidden;
}

.header button {
  float: right;
  margin-left: 20px;
}

Upvotes: 1

Related Questions