I know this should be fairly simple, but I for the life of me can't figure out the proper CSS to do this.
HTML
<h1>A Cool Header <button>Click Me</button></h1>
CSS
button{position:relative; top:50%;}
My attempt can be found Here
Any help is appreciated.
add vertical-align: middle; for button
remove position:relative; top:50%;
h1 {background-color:green}
button{
vertical-align: middle;
}
<h1>A Cool Header <button>Click Me</button></h1>
use "vertical-align: middle"
button{ display: inline-block;
vertical-align: middle;}
Use a flex box
header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
align-self: center;
}
see it running on my site's header
http://kezzi.co
Related
Is there any way to center elements that use text-align: left and doesn't involve display: inline-block?
I'm creating an epub and when centering the paragraphs through div and inline-block it breaks the page layout (see links with example).
HTML
<h2 class="numero_hino"></h2>
<h3 class="titulo_hino sigil_not_in_toc"></h3>
<div class="centralizar-div">
<div class="estrofe-div">
<p class="estrofe"></p>
<p class="estrofe"></p>
<p class="estrofe"></p>
</div>
</div>
CSS
div.centralizar-div {
text-align: center;
}
div.estrofe-div {
display: inline-block;
text-align: left;
}
How it should be:
Book in continuous mode (scroll down)
How it is:
Book in single page mode
If anyone can help me :D
try change .estrofe-div p { display: inline-block; text-align : center }
Please try the below css
div.estrofe-div {
display: flex;
align-items: center;
justify-content: center;
}
Since your are using inline-block on your divs as way to position your content, we keep it the same and add an extra css targeting only the tags.
div.centralizar-div {
text-align: center;
}
div.estrofe-div {
display: inline-block;
text-align: center;
}
div.estrofe-div p {
text-align: left;
}
Because of people's comments, I was researching until I found a way to solve the problem through flex items.
Follow the code
div.centralizar-div {
display: flex;
flex-flow: column wrap;
align-items: center;
}
I am trying to add a hyperlink at the right on the same line of my heading, but I am unable to do so. please help. Thanks!
You can try this.
div {
display: flex;
justify-content: space-between;
align-items: center;
}
h1 {
text-align: center;
}
a {
align-self: safe center;
}
<div>
<span></span>
<h1>title</h1>
link
</div>
I am trying to align my images with the text so its in the middle in a line.
<div id="bar">
<h2><img src="images/java.png" alt="logo">Java<img src="images/c++.png" alt="logo">C/C++<img src="images/unity.png" alt="logo">Unity<img src="images/sql.png" alt="logo">SQL<img src="images/html.png" alt="logo">HTML<img src="images/css.png" alt="logo">CSS<img src="images/python.png" alt="logo">Python</h2>
</div>
#bar h2{
vertical-align: middle;
}
But still looks like this
Try to use flexible box model:
#bar h2 {
display: flex;
flex-diretion:row;
justify-content: center;
align-items:center;
}
but is a better idea to put that inside a div and then create a css class for that:
.languages-bar {
display: flex;
flex-diretion:row;
justify-content: center;
align-items:center;
}
I am having this simple issue here, which worked before at a lot of places.
I am trying to align items inside a div vertically and at the center. Here in this code the margin-left works, but the margin top doesn't, I tried changing it to bigger values, still no effect at all.
.footer {
background-color: #2E7FB6;
color:white;
height:50px;
}
<div class="footer">
<section style="margin-left:15px; margin-top:10px;">FETCHED: {{ recordsFetched }} Work Order(s)</section>
</div>
Remove the inline styling, use flexbox with flex-direction: column; justify-content: center; and text-align center; on the footer.
.footer {
background-color: #2E7FB6;
color:white;
height:50px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
<div class="footer">
<section>FETCHED: {{ recordsFetched }} Work Order(s)</section>
</div>
Use flexbox tips just #rprm192 say. But if you want to make it more simple and support older browser, you can use line-height. Here's code for you
.footer {
height: 50px;
}
.footer section {
height: 100%;
line-height: 50px; //make it same as height value
}
I'm try to accomplish something rather basic but I failed to succeed, so far.
I have an image and a title which should be displayed in the center of the parent selector (div). Unfortunately I don't know how to properly align them when I center both the logo and the text.
Html:
<div class="content">
<div class="header">
<img src="path/to/image">
<span>Hey this is my title</span>
</div>
</div>
CSS:
.header{
text-align: center;
width: 100%;
height: 40px;
}
.header img{
height: 40px;
width: auto;
display: inline-block;
}
.header span{
display: inline-block;
}
As you can see the logo has a static width/height while the text can have a variable height.
The code above makes the styling like the example below:
Can anyone tell me how to do this? I basically want several divs next to eachother, but all aligned in the center.
Are you looking for vertical-align: middle to center vertically?
.header {
text-align: center;
width: 100%;
height: 40px;
}
.header img {
height: 40px;
width: auto;
display: inline-block;
vertical-align: middle;
}
.header span {
display: inline-block;
vertical-align: middle;
background: #eef;
}
<div class="content">
<div class="header">
<img src="//placehold.it/40?text=Logo" />
<span>Hey this is my title</span>
</div>
</div>
Note: I have added background for better visibility of the borders.
A better explanation:
Use flexbox. I don't know if I correctly got that you want your items to be centered both horizontally and vertically inside header. If not just delete the justify-content part.
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
More info about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/