Menu
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!
588
If you have multiple buttons that should sit side-by-side on the same line, add the data-inline="true" attribute to each button. This will style the buttons to be the width of their content and float the buttons so they sit on the same line.
If you want to move the button to the right, you can also place the button within a <div> element and add the text-align property with its "right" value to the "align-right" class of the <div>.
Just make your <h1> display:inline. This way, it will render in the normal text flow.
For example, if you wanted the heading to be centered, you could add class="center" to the <h1> tag or another heading tag.
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!
180
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
