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>
Related
<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>
Within my header, I am trying to place pending-button-notification over theimages-cart image. For some reason, the pending-button-notification div is showing on the left side of the header div.
Does anyone see why this isn't placing correctly?
This is the problematic code:
<div id="pending-order-button">
<a href="pendingOrders.html"><img src="images/cart.png" class="header-buttons" alt="Car">
<div id="pending-button-notification"></div>
</a>
</div>
header {
width: 100%;
max-width: 100%;
height: 100px;
position: relative;
border-bottom: 1px solid #E5E5E5;
}
#header-wrap {
width: 90%;
height: 100%;
margin: auto 5%;
}
#header-logo {
width: 200px;
height: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.header-buttons {
width: 30px;
height: auto;
float: right;
margin: 30px 40px 0 50px;
cursor: pointer;
}
.header-buttons:first-child {
margin-right: 0;
}
#pending-order-button {
position: relative;
}
#pending-button-notification {
border-radius: 15px;
background: #09afdf;
height: 25px;
width: 25px;
position: absolute;
color: #FFF;
font-size: 1.3rem;
top: 5px;
left: 5px;
text-align: center;
}
<header>
<div id="header-wrap">
Logo
<img src="images/menu.png" class="header-buttons" alt="Pending Orders">
<div id="pending-order-button">
<a href="pendingOrders.html"><img src="images/cart.png" class="header-buttons" alt="Car">
<div id="pending-button-notification"></div>
</a>
</div>
</div>
</header>
It's your float:right on .header-buttons which is causing the problem.
I suggest that you remove that and float the #pending-order-button div instead so that it and all it's content is moved to the right.
#pending-order-button {
position: relative;
float:right;
}
I'm practicing my HTML by making a website, and I'm making a header with buttons.
I'm trying to make the button the full height of the header, but it's going out of the header for some reason, and not going to the top.
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
You can reset the vertical-align(defaut is baseline) value on inline-block elements whenever needed. here vertical-align:top; will do fine :
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
vertical-align:top;
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
For a to cover the div, you may also use height or eventually line-height:
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
vertical-align:top;
}
#header-a a {
display:block;
line-height:70px;/* will size it up to 70px height for each line */
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
I changed it to this code. What I did was to change the display to block (in both header-a and header-h) instead of inline-block. I then floated both elements left. Run the snippet to see it in action
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
text-align: center;
margin-top: 0px;
height: 100%;
}
#header-h {
margin-top: 20px;
}
#header-h,
#header-a {
display: block;
float: left;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
Rather than setting the height of your menu bar to 70px, you could let the contents within the menu bar size its height. That way you can vertically centre the Home button. JSFiddle
HTML
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
CSS
#header {
position: fixed;
background-color: #1564B3;
color: #fff;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
background-color: #555555;
display:inline-block;
padding:30px 50px 30px 50px;
width:10%;
text-align:center;
}
#header-h {
display:inline-block;
width:30%;
text-align:center;
}
Do you see how the padding of #header-a not only vertically centres the Home text but also how the #header sizes to fit it.
This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 6 years ago.
I have a problem I can't solve. i m trying to center this black box inside red box which has absolute position. I tried making the black box to relative position but i feel like i am missing something.
Ultimately, i m trying to make the top header.
here is an image header-image.jpg
Help?
body.esc-layout {
min-width: 960px;
margin: 0 auto;
}
.promo-bar {
display: block;
}
.promo-bar .customer-care-wrapper {
float: left;
max-width: 50%;
}
.promo-bar .customer-care {
font-size: 11px;
color: #000;
margin-left: 15px;
display: block;
}
.promo-bar {
width: 100%;
min-height: 32px;
position: relative;
height: auto;
overflow: visible;
z-index: 5;
background-color: #EEE;
overflow: hidden;
}
.promo-bar .service-message-wrapper {
padding-top: 2px;
max-width: 50%;
margin: 0 auto;
position: relative;
}
.service-message-wrapper .service-banner{
position: absolute;
left: 0px;
right: 0px;
text-align: center;
background: red;
}
.caption-wrapper{
position: relative;
background: black;
}
.service-message-wrapper .captions{
font-family: inherit;
font-style: italic;
font-size: 14px;
color: white;
}
<body class="esc-layout">
<div class="promo-bar">
<div class="customer-care-wrapper promo-block">
<div class="customer-care" style="padding-top:10px; padding-bottoms:12px;">
" Contact us 24/7: "
</div>
</div>
<div class="service-message-wrapper promo-block" style="height: 28px;">
<div class="service-banner service-message-1" style="margin-top: 0px;">
<div class="caption-wrapper">
<p class="captions">
<span> Same-day delivery to New York </span>
</p>
</div>
</div>
</div>
</div>
</body>
You can use position: absolute with a combination of top and transform.
The trick is that in top: 50%, the 50% refers to the parent height. In transform, 50% refers to the element's own height.
.outer {
height: 50px;
width: 50%;
position: absolute;
top: 0;
right: 0;
background: red;
}
.inner {
position: absolute;
left: 0;
/* make the top edge of .inner appear in the vertical center of .outer */
top: 50%;
/* move .inner up by half of its height so that its middle is in the middle of .outer */
transform: translateY(-50%);
height: 20px;
width: 100%;
background: black;
}
<div class="outer">
<div class="inner"></div>
</div>
More info: http://howtocenterincss.com/
Centering inside an absolute element, the inner element needs to be absolute give a width and height.
.red-box{
background-color:red;
width:400px;
height:400px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
.black-box{
background-color:black;
width:200px;
height:200px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
<div class="red-box">
<div class="black-box"> </div>
</div>
working sample (click run button)
For center div it is very easy to use flex box.
div.outer {
align-items: center;
background: red none repeat scroll 0 0;
display: flex;
height: 50px;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
div.inner {
background: black none repeat scroll 0 0;
height: 20px;
left: 0;
width: 100%;
}
<html><head>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
Do not forget using webkit for safari and chrome and in your case I think it's better to set margin:0 for <p> for better control
p.captions{margin:0;}
Let me preface this by saying I feel like a moron. I have a fairly simple scenario that I can't figure out.
This is a sample of what my code looks like:
<div id="container-wrapper">
<div id="container">
<div class="left">This is LEFT</div>
<div class="line"></div>
</div>
</div>
Let's say #container-wrapper is a fixed width such as 960px. #container has its width set to 100%. I don't know the width of .left because the text inside is dynamic. It's floated left. .line has a background image that is essentially a line which will repeat to fill the width of the div. I want to float it next to .left so it looks something like this:
This is LEFT ---------------------------------------------------------
If I set the width of .line to 100% it will trying to fill the entire container width so the question is how do I get it to fluidly adjust to the space that is left over from .left.
Hope I'm being clear.
Thanks,
Howie
Here's a sample of the real code I'm using. .line is really .inside-separator.
<div id="container-wrapper">
<div id="container">
<div class="left">This is LEFT</div>
<div class="inside-separator"><span class="inside-separator-left"> </span><span class="inside-separator-right"> </span></div>
</div>
</div>
.inside-separator
{
background: transparent url('../images/inside_separator.png') no-repeat center center;
margin: 0;
padding: 0;
height: 7px;
width: something?;
}
.inside-separator-left,
.inside-separator-right
{
display: block;
position: absolute;
width: 8px;
height: 7px;
background: transparent url('../images/inside_plus.png') no-repeat 0px 0px;
}
.inside-separator-left
{
float: left;
left: 0;
}
.inside-separator-right
{
float: right;
right: 0;
}
I'm not sure this is possible using floats. But if you're ok using display:table instead of floating .left then it's easier.
div#container { display:table; width:100%; }
div.left, div.line { display:table-cell; }
<div class="left"><div class="line">11111111111111111</div> This is LEFT</div>
Put the .line inside the .left and float .line right
http://jsfiddle.net/Hk7GR/1/
Thanks for all of your help. The display:table did the trick. Here's a sample http://jsfiddle.net/idpexec/QKSzC/
<div class="container-wrapper">
<div class="container">
<div class="left">This is LEFT</div>
<div class="inside-separator-wrapper">
<div class="inside-separator">
<span class="inside-separator-left"> </span>
<span class="inside-separator-right"> </span>
</div>
</div>
</div>
</div>
<style>
.container-wrapper
{
width: 500px;
height: 60px;
border: 1px solid green;
margin-bottom: 50px;
}
.container
{
display:table;
width:100%;
}
.left,
.inside-separator-wrapper
{
display:table-cell;
}
.left
{
border: 1px solid red;
white-space: nowrap;
padding: 0 15px;
}
.inside-separator-wrapper
{
width: 100%;
position: relative;
}
.inside-separator
{
background: transparent url('http://test.2wsx.ws/inside_separator.png') no-repeat center center;
height: 7px;
position: relative;
top: 0px;
left: 0px;
padding: 0;
width: 100%;
}
.inside-separator-left,
.inside-separator-right
{
display: block;
position: absolute;
width: 8px;
height: 7px;
background: transparent url('http://test.2wsx.ws/inside_plus.png') no-repeat 0px 0px;
}
.inside-separator-left
{
float: left;
left: 0;
}
.inside-separator-right
{
float: right;
right: 0;
}
<style>