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>
Related
This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 9 months ago.
So I have this kind of structure:
<div class="caption">
<img src="...">
<p>Something</p>
<p>SomethingElse</p>
<p>SomethingElseAgain</p>
</div>
Every paragraph MUST be in its own line, justified to the left, and my .caption div must not take any more horizontal space than its children need.
I tried with
.caption { display: inline-block; } but that doesn't reduce the caption div at all.
I tried adding float: left to div.caption children, but all <p> tags got jumbled in one line.
How should I do this? I'm using plain html+css
In modern browsers you can simply use fit-content:
.caption {
border:1px solid red;
width:fit-content;
}
<div class="caption">
<img src="...">
<p>Something</p>
<p>SomethingElse</p>
<p>SomethingElseAgain</p>
</div>
Something else
<div class="caption">
<img src="...">
<p>Something</p>
<p>SomethingElse</p>
<p>SomethingElseAgain</p>
</div>
<style>
.caption {
width: auto;
height: auto;
}
.caption img {
width:200px;
height:200px;
}
.caption p {
display: block;
text-align: left;
}
</style>
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:
How to center an element horizontally and vertically
(27 answers)
Closed 7 years ago.
This is probably not too difficult, but for some reason - I've tried a couple of different solutions - I have some problem getting it right. I have two different div elements, a header and a textfield, that I want to center both horizontally and vertically in the middle of an enclosing div element. The header should be above the textfield.
The enclosing div element has fixed proportions, but the header varies in length and can take up just one line or more than one line.
How can I achieve this?
The HTML:
<div id="square">
<div id="header">
<h3>header</h3>
</div>
<div id="textfield">
<input id="textfield" type="text">
</div>
</div>
In CSS, I have tried various combinations of text-align: center, vertical-align: middle, left/right/top/bottom: 0 + margin: auto, etc, but so far I have only been able to center the divs horizontally.
In some of my solutions I have even tried having a fourth div element in between the outer and the inner ones.
You can do this using display:flex:
#square {
display: flex;
align-items: center; /*horizontal centering*/
justify-content: center; /*vertical centering*/
flex-direction: column; /*keep the h3 above the textbox*/
/* these are for demo only*/
width: 400px;
height: 400px;
border:1px solid red;
}
h3 {
margin-top:0; /* removing margin otherwise you'll get someone commenting the h3 isn't vertically centered*/
}
<div id="square">
<div id="header">
<h3>header</h3>
</div>
<div id="textfield">
<input id="textfield" type="text">
</div>
</div>
Does this work?
#square {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ccc;
}
<div id="square">
<div id="header">
<h3>header</h3>
</div>
<div id="textfield">
<input id="textfield" type="text">
</div>
</div>
This question already has answers here:
Center a div in CSS [closed]
(10 answers)
Closed 8 years ago.
Can't figure how to center these 3 img elements horizontal
HTML
<!-- Homepage Content -->
<div id="center">
<img src="images/homepage/wedding.png"/>
<img src="images/homepage/wildlife.png"/>
<img src="images/homepage/portrait.png"/>
</div>
CSS
#center {
display:inline-block;
margin-left:auto;
margin-right:auto;
}
Fairly simple huh but it doesnt work! Test page
You just need to add text-align: center for your #center
<div id="center">
<img src="images/homepage/wedding.png"/>
<img src="images/homepage/wildlife.png"/>
<img src="images/homepage/portrait.png"/>
</div>
CSS
#center{
display: block;
padding: 20px;
text-align: center;
border: 1px solid #000;
}
#center img{
display: inline;
}
Check this link to see demo.
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Closed 8 years ago.
<div class="col-md-3 image-container">
<img class="image" src="path-to-my-image">
</div>
<div class="col-md-9 dynamic-text-container">
<p><!-- Dynamic text here --></p>
</div>
I am using bootstrap 3 in my project. How do I centre the image vertically inside the div having variable height (WITH CSS TABLE CENTERING)?
Here's a demo:
http://www.bootply.com/7rSVv7uDBu
Jsfiddle Demo
Amended CSS
.card{
display:table;
}
.image-container,
.dynamic-text-container{
display:table-cell;
vertical-align:middle;
}
.image-container {
width:25%; /* or some other value */
}
.image-container img {
display: block;
margin:0 auto;
}
Take a look at this:
HTML:
<div class="col-md-3 image-container">
<img class="image" src="image.png" height="200px;" width="200px" />
</div>
<div class="col-md-9 dynamic-text-container">
<p>Some text....</p>
</div>
CSS:
.image-container {
height: 600px;
text-align: center;
}
.image {
position: relative;
top: 50%;
margin-top: -100px; /* half of image height */
}
DEMO HERE