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
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:
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 can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
How to align flexbox columns left and right?
(5 answers)
How should I align one element to the right and one element to the left inside a containing element?
(7 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
I need to put two logo images on the same line, vertically centered relative to each other.
Something like this:
This alone I could easily achieve with CSS vertical-align: middle;, but I also need the images to be at the very left and and the very right respectively; so normally I would do it with float: left and float: right, but then vertical-align stops working...
Another constraint is that I do not write HTML manually, but rather it is generated by a tool (pandoc, to be precise).
So long story short, I have the following two options for HTML:
Option 1:
<div id="logo-block">
<p>
<img id="logo1" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/McDonald%27s_logo.svg" />
</p>
<p>
<img id="logo2" src="https://www.festisite.nl/static/partylogo/img/logos/burger-king.png" />
</p>
</div>
Option 2:
<div id="logo-block">
<p>
<img id="logo1" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/McDonald%27s_logo.svg" />
<img id="logo2" src="https://www.festisite.nl/static/partylogo/img/logos/burger-king.png" />
</p>
</div>
Could you please help me styling any of these HTML snippets, so that I get the two images vertically centered within the "logo-block" boundaries, with "logo1" at the very left and "logo2" at the very right?
Solved by CSS Flexbox:
The best move is to just nest a flexbox inside of a flexbox. All you have to do is give the child align-items: center. This will vertically align the text inside of its parent. Using display: flex you can control the vertical alignment of HTML elements.
Option 1 snippet:
#logo-block {
display: flex;
align-content: center;
align-items: center; border:2px solid red; max-width:500px; justify-content:space-between;
}
#logo-block img {
max-width: 100px;
}
<div id="logo-block">
<p>
<img id="logo1" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/McDonald%27s_logo.svg" />
</p>
<p>
<img id="logo2" src="https://www.festisite.nl/static/partylogo/img/logos/burger-king.png" />
</p>
</div>
Option 2 snippet:**
#logo-block {
width: 500px;
border: 2px solid red;
}
#logo-block > p {
display: flex;
align-content: center;
align-items: center; justify-content: space-between;
}
#logo-block img{
max-width: 100px;
}
<div id="logo-block">
<p>
<img id="logo1" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/McDonald%27s_logo.svg" />
<img id="logo2" src="https://www.festisite.nl/static/partylogo/img/logos/burger-king.png" />
</p>
</div>
Please use display: table-cell method if tool (pandoc + wkhtmltopdf) doesn't support CSS Flexbox:
#logo-block {
display: table;
width:100%;
max-width:500px;
border:2px solid red;
}
#logo-block p {
display:table-cell;
vertical-align:middle;
}
#logo-block p:last-child {
text-align:right;
}
#logo-block img {
max-width: 100px;
}
<div id="logo-block">
<p> <img id="logo1" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/McDonald%27s_logo.svg" /> </p>
<p> <img id="logo2" src="https://www.festisite.nl/static/partylogo/img/logos/burger-king.png" /> </p>
</div>
I prefer to use images as background with background-size:contain, background-position: center. This way, the image size and image shape no longer matter. It'll show as large as the canvas allows. This is also very responsive:
#logo-block >div{
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border: 1px dotted grey; /* Just for demo, to show the 'canvas' */
}
<div id="logo-block">
<div style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4b/McDonald%27s_logo.svg');"></div>
<div style="background-image: url('https://www.festisite.nl/static/partylogo/img/logos/burger-king.png');"></div>
</div>
This question already has answers here:
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 2 years ago.
I'm currently trying to figure out how to align the top of text for two div boxes. The wrapper div is one box and within that I have two other div boxes inside that are beside one another. I want the top of the header text to align with the top of the paragraph text (photo attached). The code below is what I have right now, and the image attached is what I'm wanting. I've tried 'vertical-align:top' but it's not working. Any ideas?
What I want
.wrapper {
display: inline-flex;
width: 100%;
}
#box1, #box2 {
vertical-align: top;
}
#box1 {
background: #00FFFF;
width: 35%;
text-align: right;
}
#box2 {
background: #FF00FF;
width: 65%;
}
<div class="wrapper">
<div id="box1">
<h1>Header</h1>
</div>
<div id="box2">
<p>Paragraph goes here</p>
</div>
</div>
just remove the margin on h1
.wrapper {
display: inline-flex;
width: 100%;
}
#box1, #box2 {
vertical-align: top;
border:solid 1px black;
}
#box1 {
background: #00FFFF;
width: 35%;
text-align: right;
}
#box2 {
background: #FF00FF;
width: 65%;
}
h1{margin:0;}
<div class="wrapper">
<div id="box1">
<h1>Header</h1>
</div>
<div id="box2">
<p>Paragraph goes here</p>
</div>
</div>
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;