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>
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 do I auto-resize an image to fit a 'div' container?
(33 answers)
Closed 3 years ago.
Hi I have a div which is my nav bar, when I want to place my logos in the nav bar.
Code
<div class="first_bar">
<img class="home" src="../../assets/Home Unclicked-01.png">
<img class="energy" src = "../../assets/Enerygy panel Unclicked-01.png">
</div>
.first_bar{
background-color: #cdf7fb;
height: 52px;
}
.home {
width: 30px;
height: 30px;
}
.energy {
width: 30px;
height: 30px;
}
I am taking this as my reference and want to create something like this.
I am not able to put my icons as shown in the image above, how to size the icons do that it looks like the above.
sample image -
can some one help me with this?
Thanks.
followed the answer given,
it looks like,
how to get the spacing around my logos,as shown in the first picture?
You can try to convert your images into divs and set height: 100%; and width: 105px; for divs and size your images whatever you want like this:
HTML:
<div class="first_bar">
<div class="image-item">
<img class="home" src="en.png">
</div>
<div class="image-item">
<img class="energy" src = "en.png">
</div>
</div>
CSS:
.first_bar{
background-color: #cdf7fb;
height: 52px;
}
.image-item {
width: 105px;
height: 100%;
display: flex;
align-content: center;
}
.home {
/*Your custom height and width for this image*/
}
.energy {
/*Your custom height and width for this image*/
}
EDIT: Increase or degrease your image sizes with percentage. For example your home icon you can change the height from 130px to 105px and calculate the width depended from decreased percent, in this case, it can be 131.6px.
For calculations, you can use online calculators like this one: https://percentagecalculator.net/
This question already has answers here:
How can I vertically center text in a dynamically height div?
(10 answers)
Closed 7 years ago.
I want to centre some text within a DIV vertically. However, I'm using Bootstrap and none of the conventional methods seem to work because it's within a column. Here's what I've got so far:
HTML:
<div class="col-sm-6">
<div class="innercontent">
<h2 class="text-center">Last Hope: The Halo Machinima</h2>
</div>
</div>
CSS:
.innercontent {
display:block
margin:auto 0;
}
The col-sm-6 doesn't have a set height and nor does the inner because they will vary on multiple uses. The CSS is what I assumed would work but doesn't.
The effect I kinda want you can see on the live dev site here: http://dev.infiniteideamedia.com/machinima/lasthope.php but it's not perfectly centred using a less than adequate method.
This is how you center anything inside div which has dynamic height
.col-sm-6 {
border: 1px solid;
min-height: 300px;
position: relative;
max-width: 600px;
}
h2 {
margin: 0;
position: absolute;
top: 50%;
transform: translate(0%,-50%);
width: 100%;
text-align: center;
}
<div class="col-sm-6">
<div class="innercontent">
<h2 class="text-center">Last Hope: The Halo Machinima</h2>
</div>
</div>
David Walsh has written a good article on centering. Have a look at it.
Run below snippet
.innercontent {
height:400px;
background:#777;
padding-top:20%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-6">
<div class="innercontent">
<h2 class="text-center">Last Hope: The Halo Machinima</h2>
</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