Issue
I'm making an html program, and have a frame at the top of my page and I'm trying to center text between buttons in the frame, but it either works, but breaks lines each value, or just doesn't center at all.
Examples:
.topBar p {
color: #AAAAAA;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
display: inline;
}
Centering but with line breaks:
.topBar p {
color: #AAAAAA;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
}
I've seen similar questions but haven't retrieved an answer after looking all over the web, I even tried asking an ai but that didn't work either (yes I know ai's are very hit or miss). And I have tried many combinations of the two methods shown. I assume there is a way to do this but I haven't found it.
Solution
You can try using Flexbox
, Then flex-grow
property to distribute the remaining space between the "tungsten" text and the buttons
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
}
.topbar p {
flex-grow: 1;
text-align: center;
}
<div class="topbar">
<button>Button 1</button>
<button>Button 2</button>
<p>tungsten</p>
<input type="search" placeholder="Search...">
</div>
Answered By - Dulan Jayawickrama
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.