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.
Related
This question already has answers here:
Avoid an image to go outside a div?
(7 answers)
How do I stop an image displaying outside of the div
(6 answers)
Closed 8 months ago.
I have an issue with my images (svg, jpg,...., all formats). For instance if I want to make a header and set in CSS the header height for instance like this:
.container {
width: 1024px;
min-height: 300px;
margin-left: auto;
margin-right: auto;
}
header {
height: 300px;
display: flex;
align-items: center;
}
<div class="container">
<header>
<div>
<img src="https://via.placeholder.com/400/09f/fff.png" alt="" />
</div>
<nav>
</nav>
</header>
</div>
The image extends over the borders. How can I tackle that issue?
If the image needs to nested within div that themselves are nested within the constricting parent, you'll need to specify the size on those also.
.container{
height: 300px;
width: 1000px;
margin: 0 auto;
border: 3px solid red;
}
.container header, .container div{
height: 100%;
}
img{
height: 100%;
width: auto;
}
<div class="container">
<header>
<div>
<img src="https://via.placeholder.com/500" alt="">
</div>
</header>
</div>
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:
Center image in div horizontally [duplicate]
(7 answers)
Closed 6 years ago.
I've been trying to center an image horizontally, but everything I've tried hasn't been working. I need this image to be at the center of the div no matter the screen size, so it can appear centered on PC screens and phones as well ( it's for a project). If anybody can help me, I'd greatly appreciate it.
HTML code:
<div class = "main">
<img src = "kidme.jpg" alt ="Me!" >
</div>
CSS code :
.main {
background-color: #36454F;
width:100%;
height:345px;
}
img {
height:326px;
width:380px;
position: absolute;
margin-top: 20px;
}
This could works :
.main {
background-color: #36454F;
width:100%;
height:345px;
}
img{
height:326px;
width:380px;
display: block;
margin:auto;
margin-top: 20px;
}
Check this link
https://plnkr.co/edit/LsuxKAtvScM4znT1ROci?p=preview
<div class = "main">
<div class="imgwrap">
<img src = "kidme.jpg" alt ="Me!" >
</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;
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