This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
Vertically align text next to an image?
(26 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 4 years ago.
I'm trying to make all elements stay on one line. Here is code
.logoHeader{
width:10vw;
display:inline;
}
ul li{
display: inline-flex;
}
span{
font-size:0.5em;
}
.myClass {
display: inline-flex;
}
<div class="myClass"><img class="logoHeader" src="https://s.imgur.com/desktop-assets/desktop-assets/Navbar-logo.bcf646386406b43008da913e901b916d.svg" width="500" height="53" alt="">
<ul>
<li><h5><span>A</span>Put Iva Vizina 165</h5></li>
<li><h5><span>T</span>T +382 69 710 025</h5></li>
<li><h5><span>Random Crap</span> Plaforma, 2018</h5></li>
</ul>
</div>
So i need whole list items to be aligned alongside with logo
Use align-item: center on the .myClass element:
.logoHeader {
width: 10vw;
display: inline;
}
ul li {
display: inline-flex;
}
span {
font-size: 0.5em;
}
.myClass {
display: inline-flex;
align-items: center;
}
<div class="myClass"><img class="logoHeader" src="https://s.imgur.com/desktop-assets/desktop-assets/Navbar-logo.bcf646386406b43008da913e901b916d.svg" width="500" height="53" alt="">
<ul>
<li>
<h5><span>A</span>Put Iva Vizina 165</h5>
</li>
<li>
<h5><span>T</span>T +382 69 710 025</h5>
</li>
<li>
<h5><span>Random Crap</span> Plaforma, 2018</h5>
</li>
</ul>
</div>
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
CSS center display inline block?
(9 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 22 days ago.
I am trying to align h2 and img (icon) elements and I know that I should add display: inline-block but they shifted to the left of the section. How can I center them?
HTML:
<h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
CSS:
img {
display: inline-block;
vertical-align: -8px;
}
h2 {
display: inline-block;
text-align: center;
}
Screenshot
Use a <div> to center everything inside (text and image) using text-align:
<style>
div
{
text-align: center;
}
</style>
<div>
<h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
</div>
You can wrap both h2 and img tags in parent div so you can apply flexbox property easily and center both element.
div{
display:flex;
justify-content:center;
align-items:center;
}
div img{
margin-left:10px;
}
<div>
<h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
</div>
To center the text "Coffee" and the cup image inside a section as shown in the screenshot, you can add text-align: center to the <section> element in CSS. This will align all elements inside the section to the center.
section {
text-align: center;
}
Making <h2> as inline-block, the width become the length of the text "Coffee". Therefore, text-align: center doesn't work.
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Why is the descender “created” when baseline is set to vertical-align?
(1 answer)
Closed 1 year ago.
I have two blocks side by side: #abc and #buttons (the latter containing inline images).
I don't understand why the text "abcd" is floating on the bottom of the yellow div.
Question: Why isn't it, by default, on top left of #wrapper?
Side-remark: how to set this text "abcd" on top (vertically) or middle (vertically) of the yellow div?
* { margin: 0; padding: 0; }
#abc, #buttons { display: inline-block; }
#wrapper { background-color: yellow; }
ul li { display: inline; }
<div id="wrapper">
<div id="abc">
abcd
</div>
<div id="buttons">
<ul>
<li><img src="https://via.placeholder.com/75x75"></li>
<li><img src="https://via.placeholder.com/75x75"></li>
<li><img src="https://via.placeholder.com/75x75"></li>
<li><img src="https://via.placeholder.com/75x75"></li>
</ul>
</div>
</div>
By default if you set attribute into inline it will have vertical-align attribute as baseline it default behavior
but if you want to make it middle align or top you can change it into middle
see this code
* { margin: 0; padding: 0; }
#abc, #buttons { display: inline-block; vertical-align: middle; }
#wrapper { background-color: yellow; }
ul li { display: inline; }
<div id="wrapper">
<div id="abc">
abcd
</div>
<div id="buttons">
<ul>
<li><img src="https://via.placeholder.com/50x50"></li>
<li><img src="https://via.placeholder.com/50x50"></li>
<li><img src="https://via.placeholder.com/50x50"></li>
<li><img src="https://via.placeholder.com/50x50"></li>
</ul>
</div>
</div>
you can see css trick for more detail
This question already has answers here:
How to add space between elements so they fill their container div?
(2 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
Now I have two divs under a parent div:
<div id="block_container">
<div id="bloc1">
some words
</div>
<div id="bloc2">
<input placeholder="...">
</div>
</div>
where
#block_container
{
text-align:center;
}
#bloc1, #bloc2
{
display:inline;
}
#contact textarea {
width: 80%;
border: 1px solid #ccc;
background: #FFF;
margin: auto 0 5px;
padding: 10px;
}
This is ok for the two div components to align center. However I would like two align them two to left-right end: [some words <----- Space -----> input box]. I've tried:
#block_container
{
text-align:justify;
}
but that won't work.
Can you please kindly suggest to me how can I achieve this? Thanks.
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 4 years ago.
I have a text and an image. These are floated to left and right, and because float isn't working with inline-block elements, I can't say to these elements vertical-align: middle;. So, in this case, how can I align vertically these elements to each other?
.floatLeft {
float: left;
}
.sitename {
font-size: 1.7em;
}
.floatRight {
float: right;
}
.innerNav-container:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
<nav>
<div class="innerNav-container">
<p class="floatLeft sitename innerNav-padding">Text</p>
<img class="floatRight items innerNav-padding" src="/ico/img.png" alt="img">
<div style="clear: both;"></div>
</div>
</nav>
Use flexbox for this. More easy and more useful. Don't use float
nav {
display:flex;
justify-content:space-between;
align-items:center;
}
<nav>
<p>Text</p>
<img class="floatRight items innerNav-padding" src="https://picsum.photos/50" alt="img">
</nav>
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 6 years ago.
I'm currently writing a RSS parser and I use Ractive to generate the view. I'm trying to vertically align the contents of .feed-text-offset according to the height of .feed-item.
How can I accomplish this?
Demo: https://jsfiddle.net/zzx5L4e9/
The output HTML is like this:
<div class="feed-item">
<div class="news-img-container">
<img class="news-thumbnail" src="#" style="max-width: 125px;">
</div>
<div class="feed-text-offset">
Text here
<span class="feed-item-since">1 hr</span></div>
<div style="clear: both;">
</div>
</div>
CSS
.feed-item {
padding: 2px;
background-color: green;
float:left;
}
.feed-item-since {
font-size: 0.8em;
font-weight: 400;
margin-top: 5px;
display: block;
}
.news-img-container {
width: 125px;
float: left;
}
.feed-text-offset {
margin-left: 130px;
}
Found my answer from https://stackoverflow.com/a/31078418/969894 and thanks #GCyrillus
I can apply the following to .feed-item and re-adjust the text offset to vertically align the contents of .feed-text-offset
display: flex;
align-items: center;