Menu
I was wondering how one would make it so that they could have text followed by a button then more text, all on one line? This is what it might look like:
<h3>Some</h3>
<button>Text</button>
<h3>!</h3>
730
We can align the buttons horizontally as well as vertically. We can center the button by using the following methods: text-align: center - By setting the value of text-align property of parent div tag to the center. margin: auto - By setting the value of margin property to auto.
Even though the property says “text” align, it affects all elements inside the block-level element that are either inline or inline-block elements. The property only affects the content inside the element to which it is applied, and not the element itself.
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.
as i already mentioned, assigning text-align:center to the button itself won't work, you need to put the button inside some other element for example <p> and assign text-align:center to it.
All heading tags such as <h3> are block-level, and a block-level element occupies the entire space of its parent element (container). You can reset it to display: inline, display: inline-block (recommend), display: inline-table, or even using flexbox, float etc., there are many ways.
If you can modify the markup, I suggest not to use <h3> for semantic reason, just use <span> tags or plain text would be a better choice.
h3 {
display: inline-block;
margin: 0;
}<h3>Some</h3>
<button>Text</button>
<h3>!</h3>
<hr>
<span>Some</span>
<button>Text</button>
<span>!</span>
<hr>
Some
<button>Text</button>
!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
