I'm trying to vertical align a container div within a jumbotron.
Because the height of the container (and so the jumbotron also) is variable top: 50%; margin-top: -'height * 0.5' won't work.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
.banner {
padding: 48px 0px 48px 0px;
text-align: center;
}
.banner:after {
content: "";
display: block;
padding-top: 12.5%;
}
.container {
background: red !important; /* For testing vertical alignment */
}
<header class="jumbotron banner">
<div class="container">
<h1>Title</h1>
<p>Subtitle</p>
<p> <a class="btn btn-lg btn-primary" href="#" role="button">Button</a>
</p>
</div>
</header>
you should just center it using padding, this is the default way of doing it;
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
.banner {
padding: 5% 0px;
text-align: center;
}
.banner:after {
content: "";
display: block;
}
.container {
background: red !important; /* For testing vertical alignment */
}
<header class="jumbotron banner">
<div class="container">
<h1>Title</h1>
<p>Subtitle</p>
<p> <a class="btn btn-lg btn-primary" href="#" role="button">Button</a>
</p>
</div>
</header>
To align div vertically center you can use css like
position: relative;
top: 50%;
transform: translatey(-50%);
ex
.outer{
height:100px;
background:gray;
}
.inner{
background:green;
position:relative;
top:50%;
transform:translatey(-50%);
}
<div class="outer">
<div class="inner" >
<p>sample text</p>
</div>
</div>
There are several ways you can get content aligned vertically. I am posting here one common and most recent trick.
Give position: relative; to the parent element.
To the child:
.child-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
See JSFIDDLE and comment below if you need further assistance.
Related
I have manged to piece together enough html/css from sources online to almost be able to do what I want. I am trying to display n (currently 4) images with buttons in the center next to each other horizontally across the top of the page. I have the four images loading with a button in the middle. I have them surrounded by a box. I have them acting responsively to the size of the browser (within reason).
Unfortunately, for a reason that is unclear to me, the images will only spread about half way across the box:
Here is what I believe to be the relevant html:
<div id ="buttonWrapper">
<div class="container" id="position1">
<img src="images/originals/mountainclimber.jpg" alt="Mountain Climber">
<button class="btn" id="mountainHtmlButton">The Mountain Climber</button>
</div>
<div class="container" id="position2">
<img src="images/originals/fuchun.jpg" alt="Fuchun">
<button class="btn" id="fuchunHtmlButton">Dwelling in the Fuchun Mountains</button>
</div>
<div class="container" id="position3">
<img src="images/originals/palace.jpg" alt="Palace">
<button class="btn" id="palaceHtmlButton">Amailenborg Palace Square</button>
</div>
<div class="container" id="position3">
<img src="images/originals/udnie.jpg" alt="Udnie">
<button class="btn" id="udnieHtmlButton">Udnie</button>
</div>
</div>
And the corresponding relevant CSS:
/* Container needed to position the button. Adjust the width as needed */
.container {
position: relative;
width: 25%;
}
/* Make the image responsive */
.container img {
width: 100%;
height: auto;
}
/* Style the button and place it in the middle of the container/image */
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.container .btn:hover {
background-color: black;
}
/*
**********
Section for button alignment/positioning stuff
**********
*/
#buttonWrapper {
background-color: black;
border-radius: 10px;
}
#position1 {
float: left;
/*width: 25%; */
overflow: hidden;
}
#position2 {
overflow:hidden;
}
#position3 {
overflow:hidden;
}
#position4 {
overflow:hidden;
}
The only 50% references I see appear to be tied to the button placement. But I clearly do not fully understand what is happening here. Again, my ideal outcome here is that the 4 images are displayed side by side horizontally all the way across the black background (assuming the window size is something reasonable). I know that will still look slightly strange because of the different aspect ratios of the images.
thank you for any help
#buttonWrapper {
display:flex;
}
/* ↑ i added above code ↑ */
.container {
position: relative;
width: 25%;
}
/* Make the image responsive */
.container img {
width: 100%;
height: auto;
}
/* Style the button and place it in the middle of the container/image */
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.container .btn:hover {
background-color: black;
}
/*
**********
Section for button alignment/positioning stuff
**********
*/
#buttonWrapper {
background-color: black;
border-radius: 10px;
}
#position1 {
float: left;
/*width: 25%; */
overflow: hidden;
}
#position2 {
overflow:hidden;
}
#position3 {
overflow:hidden;
}
#position4 {
overflow:hidden;
}
<div id ="buttonWrapper">
<div class="container" id="position1">
<img src="https://picsum.photos/300/700" alt="Mountain Climber">
<button class="btn" id="mountainHtmlButton">The Mountain Climber</button>
</div>
<div class="container" id="position2">
<img src="https://picsum.photos/300/700" alt="Fuchun">
<button class="btn" id="fuchunHtmlButton">Dwelling in the Fuchun Mountains</button>
</div>
<div class="container" id="position3">
<img src="https://picsum.photos/300/700" alt="Palace">
<button class="btn" id="palaceHtmlButton">Amailenborg Palace Square</button>
</div>
<div class="container" id="position3">
<img src="https://picsum.photos/300/700" alt="Udnie">
<button class="btn" id="udnieHtmlButton">Udnie</button>
</div>
</div>
Follow this in your CSS.
Give your container float:left; width: 25%; and position:relative;
.container img { width: 100%; object-fit: cover; height: auto;}
last thing from your html , make correction in ID names. You can not repeat ID name, You have repeated position3 ID twice.
Im trying to style a div I need to be able to center both lines of text on top of each other with the image (.hand) next them on the right. I can not get this. I must not be understanding how to do this because I've looked up solutions but they are not working for me. Here is my codepen: https://codepen.io/iamgonge/pen/MQvEWY?editors=1100
here is an image of what it should look like:what section should look like.
here is my code:
HTML:
<div class="events">
<h1>You're Cool, We're Cool,</h1>
<p class="moveit">come see us at a event near you.</p>
<img class="hand"src="http://res.cloudinary.com/adamscloud/image/upload/v1518559592/hand_lco9ed.png">
</div>
CSS:
.events {
background: #fbdd37;
height: 150px;
}
.events h1{
margin-top: 0;
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.moveit{
margin-top: 0;
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hand {
width: 8%;
}
Any help here would be greatly appreciated!
You can try using flexbox.
Enclose the h1 and p in a div(.text) and then
add display:flex; in the .events container
also you will need to set the margin of h1 and p since they have a default margin.
p,h1{ margin:10px 20px; }
Please see the sample code below.
.events {
background: #fbdd37;
height: 150px;
padding:0;
margin:0;
display:flex;
justify-content:center;
align-items:center;
}
.text{
text-align:center;
}
.hand {
width: 15%;
}
p,h1{
margin:10px 20px;
}
<div class="events">
<div class="text">
<h1>You're Cool, We're Cool,</h1>
<p class="moveit">
come see us at a event near you.
</p>
</div>
<img class="hand"src="http://res.cloudinary.com/adamscloud/image/upload/v1518559592/hand_lco9ed.png">
</div>
You should put the events and moveit into a container div:
<div class="events">
<div id="container"> <!-- This div added -->
<h1>You're Cool, We're Cool,</h1>
<p class="moveit">come see us at a event near you.</p>
</div>
<img class="hand"src="http://res.cloudinary.com/adamscloud/image/upload/v1518559592/hand_lco9ed.png">
</div>
And then the minimal CSS:
.events {
background: #fbdd37;
height: 150px;
text-align:center;
width:100%;
}
.moveit{
margin-top: 0;
}
#container{
text-align:center;
float:left;
margin-left:500px;
}
.hand {
width: 8%;
float:left;
margin-left:50px;
}
This gets you close to your picture. Of course, adjust the fonts, etc. for a closer match.
This should give you something close. I used flexbox. You would just need to style the font style, boldness, and etc.
--HTML--
<div class="events">
<div class="texts">
<div class="first-line">
<h1>You're Cool, We're Cool,</h1>
</div>
<div class="second-line">
<h2 class="moveit">come see us at a event near you.</h2>
</div>
</div>
<img class="hand"
src="http://res.cloudinary.com/adamscloud/image/upload/
v1518559592/hand_lco9ed.png"/>
</div>
--CSS--
.events {
background: #fbdd37;
height: 150px;
display: flex;
text-align: center;
justify-content: center;
}
.hand {
width: 10%;
height: 40%;
margin: 35px 20px;
}
You can do it like this. It works mainly with inline-blocks and two wrapper DIVs, the inner one wrapping the two text elements, the outer one wrapping the inner wrapper and the image. that outer wrapper is centered with text-align: center, which works since it's an inline-block. The vertical centering is done the usualy way: position: relative, top: 50% and transform: translateY(-50%):
.events {
background: #fbdd37;
height: 150px;
position: relative;
text-align: center;
}
.outer_wrap {
display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.inner_wrap {
display: inline-block;
}
.events h1 {
margin-bottom: 0;
}
.moveit {
margin-top: 0;
}
.hand {
display: inline-block;
width: 120px;
padding-left: 10px;
height: auto;
}
<div class="events">
<div class="outer_wrap">
<div class="inner_wrap">
<h1>You're Cool, We're Cool,</h1>
<p class="moveit">come see us at a event near you.</p>
</div>
<img class="hand" src="http://res.cloudinary.com/adamscloud/image/upload/v1518559592/hand_lco9ed.png">
</div>
</div>
The same in a codepen: https://codepen.io/anon/pen/QQMqOw
I want a responsive img with text on top. Ive tried several different ways and I semi-get there with a bunch of kinks when I try to make it responsive, so I appreciate if anyone has a simple solution.
JSFiddle
Code snippet demonstration :
.img-fluid {
max-width: 100%;
height: auto;
opacity: 0.4;
}
<div class="container">
<img src="https://phillipbrande.files.wordpress.com/2013/10/random-pic-14.jpg?w=620" class="img-fluid">
<div class="container">
<h1>Header</h1>
</div>
</div>
You can try this , here is the code
<html>
<head>
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Image Text within container</h2>
<div class="container">
<img src="abc.jpg" alt="abc" style="width:100%;">
<div class="centered">Centered</div>
</div>
</body>
You can make use of font-size: calc(2vw + 2vh + 2vmin) (tweak around the values to your need) to make text responsive with respect to viewport size :)
.container {
position: relative;
}
.container h1 {
position: absolute;
top: 0;
left: 20px;
font-size: calc(2vw + 2vh + 2vmin);
}
.img-fluid {
max-width: 100%;
height: auto;
opacity: 0.4;
}
<div class="container">
<img src="https://phillipbrande.files.wordpress.com/2013/10/random-pic-14.jpg?w=620" class="img-fluid">
<h1>Header</h1>
</div>
Try setting position to absolute or fixed
.img-fluid{
max-width:100%;
height:auto;
opacity:0.4;
position: absolute;
}
HTML:
<div class="banner">
<img src="images/star.png" class="img-responsive" width="150" height="150" alt="star">
<h2>This is a Star</h2>
</div>
CSS:
.banner img{position:relative; width:100%; height:auto;}
.banner h2{[psition:absolute; left:50%; top:50%; font-size:30px;
line-height:30px;}
for an image use the concept:
{
display: table;
position: relative;
width: 100%;
height: auto;
}
for text to display on image use the concept
{
display: table-cell;
verticl-align: middle;
position: absolute;
}
and adjust the text on image giving top or bottom or left or right}
use the class img-responsive to not to change the width and height of image in all the views.
I'm trying to create a vertically aligned image, but also have it float left with a 10px padding.
Here is what I have so far:
<div class="container">
<div class="header">
<div class="headliner"><strong>blaw</strong>
<br />blah</div>
<div class="header_eta"></div>
</div>
<div class="content">
<div class="dummy"></div>
<div class="img-container">
<img src="http://placehold.it/75x75" alt="" />
</div>
</div>
<div class="footers"></div>
</div>
You can also check out this fiddle.
I can't seem to get the img to float: left. It seems to be centered horizontally. Once the I get the image floated left, I need to float some text to the left side of the image.
UPDATE: Something like this https://cdn.shopify.com/s/files/1/0070/7032/files/UberRUSH_Tracking_Page-5_1.png?5766570299208136168
Add text-align:left into img-container with padding-left:10px;
Like this:
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align:left; /* Align center inline elements */
font: 0/0 a;
padding-left:10px
}
try float:lefton the image, then add a div into img-container also floated left with a suitable margin
<div class="img-container">
<img src="http://placehold.it/75x75" alt="" style="float:left;"/>
<div style="float:left;margin-left:10px;">Your Content</div>
</div>
In order to achieve your desired result, you can use the following CSS code:
/* Positioning */
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
Setting top: 50% and transform: translate(..., -50%) will center your element vertically.
Setting left: 0 and transform: translate(0, ...) will float your element horizontally to the left.
For optical reference you can check my code work in this fiddle.
<div class="container">
<div class="header">
<div class="headliner"><strong>blaw</strong>
<br />blah</div>
<div class="header_eta"></div>
</div>
<div class="content">
<div class="img-container-2">
<div class="img-cell">
<img src="http://placehold.it/75x75" alt="" />
</div>
</div>
</div>
<div class="footer"> </div>
</div>
<style type="text/css">
.content {height:300px; background-color:rgb(239, 65, 59);}
.header {height:60px; background-color:rgb(55, 102, 199);}
.img-container-2 {display:table; height:100%; width:100%; text-align:left;}
.img-cell {display:table-cell; vertical-align:middle;}
.headliner {padding:10px; height:50px;}
.footer {height:40px; background-color:rgb(66, 199, 123);}
</style>
img-container text align to left;
text-align: left;
here you code
.img-container {
position: absolute;
top: 10px;
bottom: 0;
left: 10px;
right: 0;
text-align: left;
/* Align center inline elements */
font: 0/0 a;
}
Once the I get the image floated left I need to float some text to the left side of the image.
So you will need to align two divs horrizontaly. For this you will need to use display: inline-block for both of them. By using this approach, you will need to put the image inside a div, and the text inside another div.
You could also make a table with the first td containing the text and the second td containing the image. Then float table to left.
Do you need like this,
Html code:
<div class="container">
<div class="header">
<div class="headliner"><strong>" blaw "</strong><br />" IS EN ROUTE "</div>
<div class="header_eta"></div>
</div>
<div class="content">
<div class="dummy"></div>
<div class="img-container">
<img src="http://placehold.it/75x75" alt="" />
</div>
</div>
<div class="footer">sdfsd</div>
</div>
css:
.content {
height: 100px;
position: relative;
width: 100%;
border: 1px solid black;
background-color: rgb(239, 65, 59);
}
.header {
height: 60px;
background-color: rgb(55, 102, 199);
}
.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 10px;
bottom: 0;
left: 10px;
right: 0;
text-align: left;
}
.img-container:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.img-container img {
vertical-align: middle;
display: inline-block;
}
.headliner {
padding:10px;
height:50px;
}
.footer {
height: 40px;
padding-bottom: 0px;
padding-left: 5px;
padding-top: 5px;
background-color: rgb(66, 199, 123);
text-align: left;
}
you can refer a link:https://jsfiddle.net/vpbu7vxu/5/
I want to align a div centered horizontally in the page. The div contains several html content like, images, links, texts etc.
For the sake of it I cannot use display:table, which would align the div in center. How could I else align the content, without having to give an explicit width?
You will need to use justify-content: center in flexbox layout. No need of setting a width.
.center {
display: flex;
justify-content: center;
}
<div class="center">
<img src="http://placehold.it/300x300">
<span class="text">Test text</span>
Test link
</div>
Or without using flex, translate or absolute positioning:
#container {
text-align:center;
}
#center {
padding:20px;
display:inline-block;
background:#ccc;
}
<div id="container">
<div id="center">
this is a test
</div>
</div>
You can center horizontally and vertically (as you like) with a translate so easy, and without know the width or the height:
<div class="parent">
<div class="center">
Centered
</div>
</div>
CSS
.parent {
position: relative;
}
.center {
position: absolute;
left:50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
To center vertically use translateY()
Snippet:
.parent {
position: relative;
width: 100%;
height: 500px;
border: 1px solid black;
}
.center {
height: 240px;
position: absolute;
left:50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
<div class="parent">
<div class="center">
Centered
</div>
</div>