Is it possible to center an image in a div, taking into account the height of the image.
HTML
<div class="holder">
<h3>Article 1</h3>
<div class="tl">
<img src="http://placehold.it/144x70"/>
</div>
<p>Text 1</p>
<p>Text 2</p>
<div class="foot">
<h4>Author</h4>
</div>
</div>
<div class="holder">
<h3>Article 2</h3>
<div class="tl">
<img src="http://placehold.it/144x50"/>
</div>
<p>Text 1</p>
<p>Text 2</p>
<div class="foot">
<h4>Author</h4>
</div>
</div>
<div class="holder">
<h3>Article 3</h3>
<div class="tl">
<img src="http://placehold.it/100x15"/>
</div>
<p>Text 1</p>
<p>Text 2</p>
<div class="foot">
<h4>Author</h4>
</div>
</div>
CSS:
.holder {
width: 144px;
height: 215px;
float: left;
margin: 10px 10px 50px 10px;
padding: 2px;
border: 1px solid #000;
position: relative;
}
h3 {
margin: 4px 0 20px 0;
}
h4, p{
margin: 0;
}
h3, h4, p {
text-align: center;
}
.tl {
text-align: center;
height: 100px;
position: relative;
top: 12%;
transform: translateY(-12%);
}
p {
padding: 0 3px;
line-height: 18px;
}
.foot {
width: 144px;
position: absolute;
top: 197px;
}
I have made a jsfiddle here: https://jsfiddle.net/abn94Ldo/1/
I would like the centre point of all the images to line up so the text in each img placeholder (144x70 etc) is in line.
You can achieve this by two methods [by the way remove the top value for .tl div],
Make img position:absolute and set all the sides to 0 and margin:auto.
img{
position:absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin:auto;
}
Refer to jsfiddle Link
To make the tl as display:table; and add a child with display:table-row and another inside with display:table-cell; Now you will be able to make the image position center by using vertical-align: middle;
Refer to jsfiddle Link
I would use a transform :
img {
position: relative;
top: 50%; // vertical placement according to preference
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
https://jsfiddle.net/draquL3p/
Both absolute positioning and a table layout seem a bit hacky (although commonly used). My own choice would be to use them only when legacy browser support is required.
Using positioning aligning image in middle. Demo
.tl img{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
Try this:
https://jsfiddle.net/abn94Ldo/3/
.tl {
vertical-align: middle;
display: table-cell;
text-align: center;
margin-bottom: 30px;
height: 70px;
position: relative;
top: 12%;
transform: translateY(-12%);
width: 144px;
margin: 0 auto;
}
Related
Here is a span that is sticky and I tried to place it exactly at the center of the document but I don't want to give margin-left or left because it does not give the exact center of the document.
So Is there any way to get an exact center with position sticky.?
.sticky {
position: sticky;
top: 0;
background-color: yellow;
font-size: 20px;
left: 50%;
}
p{
height:500px;
}
<h2>Sticky Element</h2>
<span class="sticky">I am from sticky</span>
<p>Some example text..</p>
Use display: inline-block (?) and transform: translateX(-50%) to horizontal center your element.
.sticky {
position: sticky;
top: 0;
background-color: yellow;
font-size: 20px;
left: 50%;
display: inline-block;
transform: translateX(-50%);
}
p {
height:500px;
}
<h2>Sticky Element</h2>
<span class="sticky">I am from sticky</span>
<p>Some example text..</p>
Try using display: table property:
.sticky {
position: sticky;
top: 0;
background-color: yellow;
font-size: 20px;
display: table;
text-align: center;
margin: auto;
}
<h2>Sticky Element</h2>
<span class="sticky">I am from sticky</span>
<p>Some example text..</p>
I am trying to vertically align in the middle several lines of text next to an image which is also centred in its own div.
The parent div of both picture and text div is responsive.
The way I align the picture seems to prevent alignment of the text. I tried with tables and other solutions (also found in stack overflow), but nothing seems to work.
What am I doing wrong?
.parent-wrapper {
position: absolute;
width: 100%;
border-bottom: 1px solid #bfbfbf;
border-top: 1px solid #bfbfbf;
margin-top: 1vw;
margin-bottom: 1vw;
}
.image-wrapper {
position: relative;
float: left;
width: 30%;
padding-top: 30%;
}
.image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: no-repeat;
background-size: cover;
background-position: center;
min-width: 100%;
}
.text-wrapper {
position: relative;
float: right;
width: 70%;
padding-top: 30%;
overflow: hidden;
}
.text-details {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
vertical-align: middle;
background: center;
}
.some-text {
font-size: 20px;
}
.other-text {
font-size: 20px;
}
.another-text {
font-size: 20px;
}
<div class="parent-wrapper">
<div class="image-wrapper">
<div class="image" style="background-image: url('folder/picture.jpg');" alt="image">
</div>
</div>
<div class="text-wrapper">
<div class="text-details">
<div class="some-text">some text</div>
<div class="other-text">other text</div>
<div class="another-text">another text</div>
</div>
</div>
</div>
try this
.parent{
position:relative;
height:50vh;
background-color:blue;
}
.box-to-center{
position:absolute;
top:50%;
transform: translateY(-50%);
color:white;
}
<div class="parent">
<div class="box-to-center">
some content
</div>
</div>
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Product</span>
</div>
I need it like this and it must be responsiveness too. Can you tell me how to do that?
So this question has been asked many times before, here's a snippet from a duplicate I've answered in the past. Hope you can work your own code into the example shown :)
div.counter {
position: relative;
display: inline-block;
}
div.counter span {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
}
div.counter span:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
<div class="counter">
<span>Product</span>
<img src="http://placehold.it/60x60"/>
</div>
below is code what will do that for you.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>
</body>
</html>
Just put background-image property inside of div style.
One way is to put text as position: absolute;. Another is to put image as background.
#sample-1 img {
vertical-align: middle;
}
#sample-1 {
position: relative;
display: inline-block;
}
#sample-1 span {
position: absolute;
left: 5px;
top: 20px;
}
#sample-2 {
background-image: url('https://placehold.it/60x60');
width: 60px;
height: 60px;
text-align: center;
}
#sample-2 span {
line-height: 60px;
}
<div id="sample-1">
<img src="https://placehold.it/60x60">
<span>Product</span>
</div>
<div id="sample-2">
<span>Product 2</span>
</div>
Try this
<div class="demo">
<img style="vertical-align:middle" src="https://placehold.it/200x200">
<span style="">Product</span>
</div>
css
.demo {
width:200px;
position:relative;
}
.demo span{
position:absolute;
left: 0;
right: 0;
top: 50%;
text-align: center;
margin: -9px auto 0;
}
Use below code in this i have seted line height equals to div height and it is responsive also
#imgContainer{
background: url(https://placehold.it/60x60);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
text-align: center;
}
#imgDesc{
top: 50%;
position: relative;
}
<div id="imgContainer">
<span id="imgDesc">Works.</span>
</div>
.image {
position:relative;
}
.image img {
width:300px;
}
.text {
left: 0;
position:absolute;
text-align:center;
top: 100px;
width: 300px
}
<div class="image">
<img src="https://placehold.it/60x60"/>
<div class="text">
Text
</div>
</div>
I know there are several similar questions, but I couldn't find solution for my situation
.parent-div{
margin-top: 50px;
max-width: 350px;
background-color: azure;
position: relative;
height: 400px;
}
img{
max-height: 100px;
}
.image-holder-div{
position: absolute;
right: -15px;
top: -15px;
background-color: white;
padding: 15px;
}
<div class="parent-div">
<div class="image-holder-div">
<img src="http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142">
</div>
<p>some text here which I need to be ober the image</p>
<p>The same situation is here, need to be... </p>
</div>
This is the situation.
I need the image to be in right place where it is now. (with certain positioning)
And I need to put text over the image holder div. But the main question is to do that without using position:absolute for text.
I uzed z-index but no result.
Give your p tags position:relative and this will solve your problem :)
Below is working snippet:
.parent-div {
margin-top: 50px;
max-width: 350px;
background-color: azure;
position: relative;
height: 400px;
}
img {
max-height: 100px;
}
.image-holder-div {
position: absolute;
right: -15px;
top: -15px;
background-color: white;
padding: 15px;
}
p {
position: relative;
}
<div class="parent-div">
<div class="image-holder-div">
<img src="http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142">
</div>
<p>some text here which I need to be ober the image</p>
<p>The same situation is here, need to be... </p>
</div>
Give the p elements a position: relative. Than set z-index: 1; This will put the text in front of the image.
.parent-div{
margin-top: 50px;
max-width: 350px;
background-color: azure;
position: relative;
height: 400px;
}
.parent-div p {
position: relative;
z-index: 1;
}
img{
max-height: 100px;
}
.image-holder-div{
position: absolute;
right: -15px;
top: -15px;
background-color: white;
padding: 15px;
}
<div class="parent-div">
<div class="image-holder-div">
<img src="http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142">
</div>
<p>some text here which I need to be ober the image</p>
<p>The same situation is here, need to be... </p>
</div>
Please try this:
.parent-div{
margin-top: 50px;
max-width: 350px;
background-color: azure;
position: relative;
height: 400px;
}
img{
max-height: 100px;
}
.image-holder-div{
position: absolute;
right: -15px;
top: -15px;
background-color: white;
padding: 15px;
}
.over {
position: relative;
z-index: 4; /* if needed */
}
<div class="parent-div">
<div class="image-holder-div">
<img src="http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142">
</div>
<p class="over">some text here which I need to be ober the image</p>
<p class="over">The same situation is here, need to be... </p>
</div>
If you want to do that you can just use it as a background image to the div see below.
.parent-div{
margin-top: 50px;
max-width: 350px;
background-color: azure;
position: relative;
height: 400px;
background-image: url("http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142");
background-repeat: no-repeat;
background-size: auto 100px;
background-position: right top;
}
<div class="parent-div">
<p>some text here which I need to be over the image</p>
<p>The same situation is here, need to be... </p>
</div>
.parent-div{
margin-top: 50px;
max-width: 350px;
background-color: azure;
position: relative;
height: 400px;
}
img{
max-height: 100px;
}
.image-holder-div{
position: absolute;
right: -15px;
top: -15px;
background-color: white;
padding: 15px;
}
.parent-div p{
position:relative
}
<div class="parent-div">
<div class="image-holder-div">
<img src="http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142">
</div>
<p>some text here which I need to be ober the image</p>
<p>The same situation is here, need to be... </p>
</div>
p{
position: relative;
}
.parent-div{
margin-top: 50px;
max-width: 350px;
background-color: azure;
position: relative;
height: 400px;
}
img{
max-height: 100px;
}
.image-holder-div{
position: absolute;
right: -15px;
top: -15px;
background-color: white;
padding: 15px;
}
<div class="parent-div">
<div class="image-holder-div">
<img src="http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142">
</div>
<p>some text here which I need to be ober the image</p>
<p>The same situation is here, need to be... </p>
</div>
The best solution was to give position: relative to p elements
Link to jsfiddle
.parent-div{
margin-top: 50px;
max-width: 350px;
background-color: azure;
position: relative;
height: 400px;
z-index:-1;
}
img{
max-height: 100px;
z-index:-1;
}
.image-holder-div{
position: absolute;
right: -15px;
top: -15px;
background-color: white;
padding: 15px;
z-index:-1;
}
.parent-div p{z-index:9999;}
<div class="parent-div">
<div class="image-holder-div">
<img src="http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142">
</div>
<p>some text here which I need to be ober the image</p>
<p>The same situation is here, need to be... </p>
</div>
How do I center a text over an image in css?
<div class="image">
<img src="sample.png"/>
<div class="text">
<h2>Some text</h2>
</div>
</div>
I want to do something like the one below but I'm having difficulties, here's my current css
<style>
.image {
position: relative;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
margin: 0 auto;
width: 300px;
height: 50px;
}
</style>
When I use background-image I do not get any output from html2pdf:
<style>
#image_container{
width: 1000px;
height: 700px;
background-image:url('switch.png');
}
</style>
Print
<?php ob_start(); ?>
<div id="image_container"></div>
<?php
$_SESSION['sess'] = ob_get_contents();
ob_flush();
?>
Here's prints.php:
<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?>
How about something like this: http://jsfiddle.net/EgLKV/3/
Its done by using position:absolute and z-index to place the text over the image.
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}
<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
<p id="text">
Hello World!
</p>
</div>
This is another method for working with Responsive sizes. It will keep your text centered and maintain its position within its parent. If you don't want it centered then it's even easier, just work with the absolute parameters. Keep in mind the main container is using display: inline-block. There are many others ways to do this, depending on what you're working on.
Based off of Centering the Unknown
Working codepen example here
HTML
<div class="containerBox">
<div class="text-box">
<h4>Your Text is responsive and centered</h4>
</div>
<img class="img-responsive" src="http://placehold.it/900x100"/>
</div>
CSS
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 100%;
text-align: center;
width: 100%;
}
.text-box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
h4 {
display: inline-block;
font-size: 20px; /*or whatever you want*/
color: #FFF;
}
img {
display: block;
max-width: 100%;
height: auto;
}
Why not set sample.png as background image of text or h2 css class? This will give effect as you have written over an image.
For a responsive design it is good to use a container having a relative layout and content (placed in container) having fixed layout as.
CSS Styles:
/*Centering element in a base container*/
.contianer-relative{
position: relative;
}
.content-center-text-absolute{
position: absolute;
text-align: center;
width: 100%;
height: 0%;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 51;
}
HTML code:
<!-- Have used ionic classes -->
<div class="row">
<div class="col remove-padding contianer-relative"><!-- container with position relative -->
<div class="item item-image clear-border" ><img ng-src="img/engg-manl.png" alt="ENGINEERING MANUAL" title="ENGINEERING MANUAL" ></div> <!-- Image intended to work as a background -->
<h4 class="content-center-text-absolute white-text"><strong>ENGINEERING <br> MANUALS</strong></h4><!-- content div with position fixed -->
</div>
<div class="col remove-padding contianer-relative"><!-- container with position relative -->
<div class="item item-image clear-border"><img ng-src="img/contract-directory.png" alt="CONTRACTOR DIRECTORY" title="CONTRACTOR DIRECTORY"></div><!-- Image intended to work as a background -->
<h4 class="content-center-text-absolute white-text"><strong>CONTRACTOR <br> DIRECTORY</strong></h4><!-- content div with position fixed -->
</div>
</div>
For IONIC Grid layout, evenly spaced grid elements and the classes used in above HTML, please refer - Grid: Evenly Spaced Columns. Hope it helps you out... :)
as Harry Joy points out, set the image as the div's background and then, if you only have one line of text you can set the line-height of the text to be the same as the div height and this will place your text in the center of the div.
If you have more than one line you'll want to set the display to be table-cell and vertical-alignment to middle.
as of 2017 this is more responsive and worked for me.
This is for putting text inside vs over, like a badge.
instead of the number 8, I had a variable to pull data from a database.
this code started with Kailas's answer up above
https://jsfiddle.net/jim54729/memmu2wb/3/
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 30%;
text-align: center;
width: 100%;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 30px;
}
.img-responsive {
display: block;
max-width: 100%;
height: 120px;
margin: auto;
padding: auto;
}
.dataNumber {
margin-top: auto;
}
<div class="containerBox">
<img class="img-responsive" src="https://s20.postimg.org/huun8e6fh/Gold_Ring.png">
<div class='text-box'>
<p class='dataNumber'> 8 </p>
</div>
</div>
A small and short way of doing the same:
.image {
position: relative;
margin-bottom: 20px;
width: 100%;
height: 300px;
color: white;
background: url('https://via.placeholder.com/600') no-repeat;
background-size: 250px 250px;
}
<div class="image">
<p>
<h3>Heading 3</h3>
<h5>Heading 5</h5>
</p>
</div>
Quick solution: Set position: relative; on the container element and set position: absolute; on child elements in that container element, with the necessary top, left, bottom, right-adjusting parameters:
.top-left {
position: absolute;
top: 2px;
left: 2px;
}
.bottom-right {
position: absolute;
bottom: 2px;
right: 2px;
}
.container {
position: relative;
text-align: center;
color: white;
float:left;color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
<div class="container" style="">
<img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2#2x.png" width="100">
<div class="top-left">Wikipedia</div>
<div class="bottom-right">Everyone's Encyclopedia</div>
</div>
Center it directly in the middle with the following CSS...
top: 50%;
left: 50%;
transform: translate(-50%, -50%);