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;
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 1 year ago.
This is part of the code for a website template I developed a few years ago:
.container {
display: block;
border: 3px;
}
.infosp1 {
display: table;
width: 700px;
margin-bottom: 20px;
margin-top: 20px;
bottom: 30px;
}
.infosp1 div:nth-child(2) {
display: table-cell;
text-align: left;
}
div:nth-child(3) p {
width: 90px;
height: 200px;
margin-top: -10px;
}
div img {
height: 86px;
}
.infosp2,
.infoprice {
display: table-cell;
columns: 2;
padding: 20px;
color: #FFF;
background-color: red;
}
.caravanprice {
width: 50px;
font-weight: 800;
text-align: right;
}
<div class="container">
<div class="infosp1">
<div class="infosp2">Hotel de Paris</div>
<div class="infoprice">€200</div>
</div>
<div class="infosp1">
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/H%C3%B4tel_Ville_Paris.jpg/1200px-H%C3%B4tel_Ville_Paris.jpg"></div>
<div>
<p>This Paris hotel has everything you need</p>
</div>
</div>
<div class="infosp1">
<div class="infosp2">Hotel de Paris</div>
<div class="infoprice">€200</div>
</div>
<div class="infosp1">
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Hotel_Paris.jpg/1200px-Hotel_Paris.jpg"></div>
<div>
<p>This Paris hotel was excellent value</p>
</div>
</div>
</div>
The template works, but the text does not align evenly with the images, it's right at the bottom of the div after div.infosp1.
I tried margin-top with -10px; did not work at all.
I could use tables but I've got the header to work how I needed it to.
My biggest problem is trying to get everything to align evenly, and margin-top didn't work.
This relates to DIVs within the container element of a DIV.
As it is, this is a template that I'm testing which works OK but would really appreciate some help to get this looking and working better.
One way to fix it is to add vertical-align to the div that contains a caption. Using flexbox will be even better.
<div class="caption-container">
<p>This Paris hotel was excellent value</p>
</div>
.caption-container {
vertical-align: middle;
}
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
I am trying to create a promotion where a picture is on the left and text on the right. How would I vertically center the text so that it appears in the middle of the photo? I have tried using margin and vertical-align, but they did not work.
In addition, why does the div with the text not appear on the same line as the div with the image, even though their widths are both set at 50%?
Here is my HTML and CSS:
.main-promotion .image {
display: inline-block;
vertical-align: top;
width: 50%;
height: 100%;
}
.main-promotion img {
width: 100%;
}
.main-promotion .description {
display: inline-block;
text-align: center;
width: 50%;
height: 100%;
font-size: 2vw;
}
<div class="main-promotion">
<div class="image">
<img src="https://images.newscientist.com/wp-content/uploads/2019/01/14144335/art-800x533.jpg" alt="Image Here">
</div>
<div class="description">
<h3> Get access to the morning routine used by world-class performers for FREE! </h3>
<p> We'll send it to you immediately! </p>
<button> Click me! </button>
</div>
</div>
Thank you in advance for your help!
See Flex display, with align-items:center;
.main-promotion{
display: flex;
align-items: center;
}
You can then also remove inline-block and vertical-align properties from your children properties.
Add css attribute position and float:
.main-promotion .image {
display: inline-block;
vertical-align: top;
width: 50%;
height: 100%;
position:relative; float:left
}
.main-promotion img {
width: 100%;
}
.main-promotion .description {
display: inline-block;
text-align: center;
width: 50%;
height: 100%;
font-size: 2vw;
position:relative; float:left
}
<div class="main-promotion">
<div class="image">
<img src="https://images.newscientist.com/wp-content/uploads/2019/01/14144335/art-800x533.jpg" alt="Image Here">
</div>
<div class="description">
<h3> Get access to the morning routine used by world-class performers for FREE! </h3>
<p> We'll send it to you immediately! </p>
<button> Click me! </button>
</div>
</div>
Sounds like you need display: flex on your parent div.
And then alter the size of the img a bit.
https://codepen.io/raqem/pen/BgpYwj
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 to vertical align an inline-block in a line of text?
(2 answers)
Closed 6 years ago.
I have text and image content/divs that are aligned. But I want them to be centred vertically with each other as well.
html
<div class="cell"><a href="...'</a></div>
<div class="separate"></div>
<div class="cell"><a href="...'</a></div>
<div class="separate"></div>
<div class="cell"><a href="...'</a></div>
css
.cell, .separate {
display: inline-block;
margin: 0 5px;
}
.separate {
width: 2px; height: 25px;
background-color: red;
}
To this rule, add vertical-align: middle;:
.cell, .separate {
display: inline-block;
margin: 0 5px;
vertical-align: middle;
}
One way to vertically align content is using line height. This method only works for one line of text though:
HTML
<div id="parent">
<div id="child">Text here</div>
</div>
CSS
#child {
line-height: 200px;
}
This can be extended for images too:
HTML
<div id="parent">
<img src="image.png" alt="" />
</div>
CSS
#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}
You can read about other methods to vertically center content here: http://vanseodesign.com/css/vertical-centering/
You can vertically align inline content with vertical-align
.cell, .separate {
display: inline-block;
margin: 0 5px;
vertical-align: middle;
}
.separate {
width: 2px; height: 25px;
background-color: red;
}
<div class="cell">asdf</div>
<div class="separate"></div>
<div class="cell">asdf</div>
<div class="separate"></div>
<div class="cell">asdf</div>
This question already has answers here:
Align two inline-block div with content
(2 answers)
Closed 7 years ago.
Desired result: The two divs with class inline should be on the same horizontal level (the second one contains two other divs with some content).
However, as can be seen below, the two divs are not aligned vertically. If I remove the content (the word "text") from both the .inside divs, they line up as expected.
How can I make them line up? What is causing this?
.inline,
.inside {
margin: 0;
padding: 0;
width: 100px;
height: 100px;
}
.inline {
display: inline-block;
background-color: chartreuse;
}
.inside {
height: 48px;
background-color: salmon;
border: solid 1px black;
}
<div class="inline">
</div>
<div class="inline">
<div class="inside">text</div>
<div class="inside">text</div>
</div>
<hr>
<div>Without content (i.e. the word "text"):<div>
<div class="inline">
</div>
<div class="inline">
<div class="inside"></div>
<div class="inside"></div>
</div>
.inline {
vertical-align: top;
}
Thanks everybody.