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;
}
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 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 have the following HTML:
<div class = "container">
<div class = "img">
<img src = "http://icons.iconarchive.com/icons/danieledesantis/playstation-flat/512/playstation-cross-icon.png">
</div>
<div class = "text">
<h1>
Click to close your window.
</h1>
</div>
</div>
and CSS:
.img {
width: 30%;
float: left;
}
.text {
width: 70%:
float: right;
}
I want to vertically align the text div with the img div. I want to keep flexible height so I cant use
display: table and display: table-cell;
I tried playing with padding-top on text but i couldn't get it right for all the devices.
How can I align the text div with the img div so that text always sits in the middle of the image?
Here is jsfiddle: https://jsfiddle.net/whqL4fot/1/
Start using Flexbox :)
.container {
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
Updated jsfiddle
( https://jsfiddle.net/whqL4fot/2/ )
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