<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>
Related
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>
I've tried everything, but nothing works! transform: translate (50%); seems to work, but it doesn't align it to the exact center. I even tried left: 50%; with it.
I've spent a week figuring it out, and I still can't.
The image I'm trying to align is a logo with the dimensions 660 X 150.
<div id="rectangle"> </div>
<img class="logo" src="Untitled.png">
<style>
.logo {
position: fixed;
width: 35%;
top: -5px;
height: auto;
}
#rectangle {
width: 100%;
height:100px;
background:#101010;
position: fixed;
top: 0;
}
</style>
EDIT: No, I want to align the logo to the center of the page. The rectangle div is the background color for the logo.
Also, none of those answers worked. :(
Try this:-
Use display: flex; justify-content: center; element to align img at center.
<div id="rectangle" style="display: flex; justify-content: center;">
<img class="logo" src="Untitled.png">
</div>
<style>
.logo {
position: relative;
width: 35%;
top: -5px;
height: auto;
text-align:center;
}
#rectangle {
width: 100%;
height:100px;
background:#101010;
position: fixed;
top: 0;
}
</style>
Instead of using an <img> tag, try using a div and give that image as backgorund with
background-position: center;
background-image=url('image.png');
backgorund-repeat:no-repeat;
background-size:contain;
use this
<div id="rectangle"><img class="logo" src="Untitled.png"></div>
and for style
<style>
.logo {
margin-right:auto;
margin-left:auto;
}
#rectangle {
width: 100%;
height:100px;
vertical-align:center;
}
</style>
try it
<div id="rectangle"> </div>
<img class="logo" src="Untitled.png">
</div>
<style>
.logo {
width: 35%;
height: 150px;
}
#rectangle {
width: 100%;
height: 150px;
background: #101010;
text-align: center;
}
</style>
Are you looking for something like this ?
And yes, avoid using center tag as its deprecated in HTML5.
.center-my-content {
height: 500px;
width: 500px;
position: relative;
border: 1px solid #000;
margin: 0 auto;
}
.logo{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div id="rectangle" class="center-my-content">
<img class="logo" src="http://www.harpseals.org/images/seals/whitecoat_on_back-photo-eric_baccega_npl-sm.jpg">
</div>
Remove the position: fixed; from the img.
.logo {
height: auto;
width: 35%;
display: block;
margin: 0 auto;
top: -5px;
}
#rectangle {
position: fixed;
width: 100%;
height: 100px;
background: #101010;
top: 0;
}
<div id="rectangle">
<img class="logo" src="image.png"></div>
How do you center h1 in an img element, when the image is 100% of screens width and always maintaining aspect ratio? This pen shows what I mean. I've seen some answers here on SO, but the image always had width and height fixed.
to achieve your goal you need to put both img and h1 into a div and use positioning to center the h1
#headerImage {
width:100%;
margin-left:auto;
margin-right:auto;
background-position:center;
background-repeat:no-repeat;
}
#greeting{
padding: 0px;
position: relative;
}
#greetin-h1{
text-align: center;
color:#000;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index: 9999;
}
<div id="greeting">
<img id="headerImage" src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt=""/>
<h1 id="greetin-h1">THIS IS H1 ELEMENT</h1>
</div>
Why not using the image as background?
html, body{
width: 100vw;
}
#greeting{
padding: 140px 20px 50px 20px;
background-image: url("http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#greetin-h1{
text-align: center;
color:black;
}
<div id="greeting">
<h1 id="greetin-h1">THIS IS H1 ELEMENT</h1>
</div>
greeting add css style
#greetin {
padding: 140px 20px 50px 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Use a combination of relative and absolute positioning, table and table-cell display like this:
CSS:
#headerImage {
position: relative;
text-align: center;
display: inline-block;
}
#headerImage img {
max-width: 100%;
}
#greeting {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#greetin-h1 {
margin: 0;
display: table;
width: 100%;
height: 100%;
}
#greetin-h1 span {
display: table-cell;
vertical-align: middle;
}
HTML:
<div id="headerImage">
<div id="greeting">
<h1 id="greetin-h1"><span>THIS IS H1 ELEMENT</span></h1>
</div>
<img src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt="">
</div>
Fiddle: https://jsfiddle.net/ve8sot21/1
This way the h1 will always be centered horizontally and vertically no matter the image dimension.
.wrapper {
position: relative;
}
img {
display: block;
width: 100%;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: gold;
}
<div class="wrapper">
<img src="https://www.propointgraphics.com/wp-content/uploads/2016/01/stock-photos-vince_3219813k.jpg" alt="">
<h1>Hello, World!</h1>
</div>
Basically, I want to have a hr behind my text and my text will be in the middle of it.
Here's some sample markup:
<div class="test">
<hr class="middle-line"/>
Some Text
</div>
.test {
text-align: center;
}
hr.middle-line {
width: 0px;
height: 100px;
z-index: -1;
}
Link to fiddle; https://jsfiddle.net/hLh55t7p/
You may use absolute positioning like this:
.test {
text-align: center;
position: relative
}
hr.middle-line {
width: 0px;
height: 100px;
z-index: -1;
}
.test p{
position: absolute;
text-align: center;
top: 0;
width: 100%
}
<div class="test">
<hr class="middle-line"/>
<p>Some Text</p>
</div>
Add negative values to the text margin in this way:
.test {
text-align: center;
}
.test div {
margin-top: -70px;
}
hr.middle-line {
width: 0px;
height: 100px;
z-index: -1;
}
HTML:
<div class="test">
<hr class="middle-line"/>
<div>Some Text</div>
</div>
Or you can use position: absolute.
The text is already on top of the image, but the image changes in size when you resize the page. How can you let the text adjust it's center to the height of the image?
This is what I got
HTML
<section id="eyeCatcher">
<div id="catchContainer" >
<div id="eyeCatchQuote">
<h1>text</h1>
</div>
<span id="eyeCatchPhoto" role="img" >
<span class="inner">
</span>
</span>
</div>
</section>
CSS
#eyeCatcher{
max-width: 1366px;
margin: 0 auto;
}
#catchContainer {
max-width: 1366px;
}
#catchContainer #eyeCatchPhoto {
width: 100%;
display: inline-block;
vertical-align: middle;
font: 0/0 serif;
text-shadow: none;
color: transparent;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
#catchContainer #eyeCatchPhoto .inner{
padding-top: 60%;
display: block;
height: 0;
}
#catchContainer #eyeCatchPhoto{
background-image: url("../img/overview.jpeg");
}
#eyeCatchQuote{
margin-top: -26px;
position: relative;
top: 300px;
}
And this is what it looks like
Big
Resize to small
Instead of using a span with a background image you can use an actual image.Then it is possible to center the text using absolute positioning.
HTML:
<section id="eyeCatcher">
<div id="catchContainer">
<div id="eyeCatchQuote">
<h1>TEXT ELEMENT</h1>
</div>
<img src="YOURIMage" id="eyeCatchPhoto" role="img">
</div>
</section>
CSS:
#eyeCatcher {
max-width: 1366px;
margin: 0 auto;
}
#catchContainer {
max-width: 1366px;
position: relative;
}
#catchContainer #eyeCatchPhoto {
width:100%;
}
#eyeCatchQuote {
position: absolute;
top: 50%;
left:50%;
margin:0;
transform:translateX(-50%)translateY(-50%);
}
Here is a fiddle