How do I vertically center an img and an h1 in a div? Right now I have a png and an h1 in a header but the content is automatically in the top left. How do I put it in the middle and keep it responsive? Here's my HTML:
header {
text-align: center;
max-height:680px;
}
<header>
<h1 id="title">Lorem Ipsum</h1>
<img id="arrows" src="images/arrows.png">
<h3 id="sub-title">Lorem ipsum</h3>
</header>
edit: Sorry I should have mentioned that the header has a specific height. How do I put the text and image right in the middle of the header, both vertically and horizontally?
I know two ways to align it vertically.
First way: using table
header {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.wrapper {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
<div class="wrapper">
<header>
<h1 id="title">Lorem Ipsum</h1>
<img id="arrows" src="images/arrows.png">
<h3 id="sub-title">Lorem ipsum</h3>
</header>
</div>
Second way: using relative position
body, html {
height: 100%;
}
div.wrapper {
height: 100%;
}
header {
text-align: center;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
<div class="wrapper">
<header>
<h1 id="title">Lorem Ipsum</h1>
<img id="arrows" src="images/arrows.png">
<h3 id="sub-title">Lorem ipsum</h3>
</header>
</div>
If you want them in a line and centered:
header{
text-align: center;
}
h1, h3, img{
display: inline-block;
margin: 0 10px;
}
Centering it horizontally and vertically using Flexbox.
html,
body {
height: 100%;
}
.flex-wrap {
display: flex;
justify-content: center;
height: 100%;
}
header {
align-self: center;
}
<div class="flex-wrap">
<header>
<h1 id="title">Lorem Ipsum</h1>
<img id="arrows" src="http://placehold.it/300x300">
<h3 id="sub-title">Lorem ipsum</h3>
</header>
</div>
Related
This should be fairly simple, however I am stumped as to why it is not working. The div (logo-and-text) inside the container (logo-wrapper) does not want to work with position absolute and the parent as position relative. If I do the individual image inside the div or the text it works.
I've tried setting the height of the container, setting margins to zero, checked in chrome dev tools.
<section id="contact-me-section">
<div id="contact-me-section-wrapper">
<div id="have-a-question-wrapper">
<h2 class="contact-h2">HAVE A QUESTION?</h2>
<div class="connect-with-me-image-wrapper">
<img class="contact-img" src="images/location.png" alt="">
<p class="contact-p">Dayton, Ohio</p>
</div>
<div class="connect-with-me-image-wrapper">
<img class="contact-img" src="images/phone.png" alt="">
<p class="contact-p">( 937 ) 336-9359</p>
</div>
<div class="connect-with-me-image-wrapper">
<img class="contact-img" src="images/email.png" alt="">
<p class="contact-p">contact#ryanjthacker.com</p>
</div>
</div>
<div id="logo-wrapper">
<div id="logo-and-text">
<img src="images/logo.png" alt="">
<p>Copyright © 2019 Ryan Thacker - All rights reserved</p>
</div>
</div>
<div id="connect-with-me-wrapper">
<h2 class="contact-h2">CONNECT WITH ME</h2>
<div class="connect-with-me-image-wrapper">
<img class="contact-img" src="images/facebook_white.png" alt="">
<p class="contact-p">Facebook</p>
</div>
<div class="connect-with-me-image-wrapper">
<img class="contact-img" src="images/linkedin_white.png" alt="">
<p class="contact-p">LinkedIn</p>
</div>
<div class="connect-with-me-image-wrapper">
<img class="contact-img" src="images/github_white.png" alt="">
<p class="contact-p">GitHub</p>
</div>
</div>
</div>
</section>
#contact-me-section {
color: white;
background-color: black;
height: auto;
width:100%;
}
#contact-me-section-wrapper {
display: flex;
text-align: center;
justify-content: center;
}
#have-a-question-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 100px;
}
#logo-wrapper {
margin-left: 150px;
margin-right: 150px;
position: relative;
height: 100%;
}
#logo-and-text {
position: absolute;
bottom: 0;
}
#logo-wrapper img {
width: 116px;
margin: 10px;
}
#connect-with-me-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 100px;
}
.contact-h2 {
font-size: 17px;
margin: 20px;
padding-top: 60px;
padding-bottom: 30px;
text-align: left;
}
.contact-p {
color: #989898;
margin-top:auto;
margin-bottom:auto;
font-size: 15px;
}
.contact-img {
width: 60px;
margin: 20px;
}
.connect-with-me-image-wrapper {
display: flex;
flex-direction: row;
}
I believe I have solved it, its due to using flex box. The solution is a much easier and flexible way to do it.
Instead I just used align-self: flex-end; to the container.
I am working on an image gallery and want have the image's container be completely centered on the page, but the images are left aligned.
This is my desired output:
However, when I try to do a text-align: center on the container(id: gallery) I am getting the images displayed like this:
I tried following suit with a previous stack overflow question: CSS: Center block, but align contents to the left
and wrap the images in another div then align it with display: inline-block; and text-align: left; but the images just seem to align left on the entire page:
What can I do to accomplish my desired output?
HTML
<div id="gallery">
<div id="images">
<div class="container">
<a href="images/gallery/image1.jpg" data-lightbox="mygallery">
<img src="images/gallery/image1.jpg">
<div class="overlay">
<img src="images/magnify.png">
</div>
</a>
</div>
<div class="container">
<a href="images/gallery/image2.jpg" data-lightbox="mygallery">
<img src="images/gallery/image2.jpg">
<div class="overlay">
<img src="images/magnify.png">
</div>
</a>
</div>
</div>
</div>
CSS
#gallery{
text-align: center;
}
#images{
display: inline-block;
text-align: left;
}
img{
width: 300px;
cursor: pointer;
}
.overlay {
position: absolute;
right: 0;
left: 0;
cursor: pointer;
visibility: hidden;
color: transparent;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
transition: all ease-in .3s;
}
.overlay > img{
height: 50%;
width: 50%;
top: 50%;
visibility: hidden;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
.overlay:hover > img{
visibility: visible;
}
.container {
position: relative;
display: inline-block;
margin: 5px;
}
.container:hover .overlay {
visibility: visible;
opacity: .6;
background: black;
color: white;
}
How about styling the image wrapper .images like
.images {
width:80%;
margin:0 auto;
text-align:left;
}
this works
body{
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: center;
align-items: center;
}
section{
height:400px;
width:400px;
background:grey;
}
img {
margin:48px;
}
<section>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
</section>
Give your #gallery div a max-width, text-align: center, and margin:auto, then put your header in another div inside the #gallery, but outside the #images. Then put text-align: left on your #images div.
See example below:
#gallery {
text-align: center;
max-width: 420px;
margin: auto;
}
img {
width: 100px;
cursor: pointer;
}
.container {
display: inline-block;
}
#images {
text-align: left
}
<div id="gallery">
<div id="header">
<h1>Header</h1>
</div>
<div id="images">
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=d42">
<img src="http://thecatapi.com/api/images/get?id=d42">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=21o">
<img src="http://thecatapi.com/api/images/get?id=21o">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=49e">
<img src="http://thecatapi.com/api/images/get?id=49e">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=13v">
<img src="http://thecatapi.com/api/images/get?id=13v">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=6e6">
<img src="http://thecatapi.com/api/images/get?id=6e6">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=4bf">
<img src="http://thecatapi.com/api/images/get?id=4bf">
</a>
</div>
</div>
</div>
HTML
<h2>HEADER</h2>
<div class="container">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
CSS
h2 {
text-align: center;
}
.container {
float: left;
}
img {
border: medium solid black;
width: 200px;
height: 350px;
margin: 5% 2%;
}
I am having trouble getting my image to rotate. I have tried using the image rotate property in CSS but that doesn't seem to have don the trick. The elements above the image are floated elements. I'm not sure if they might be interfering with the image in some way.
body {
margin: 0;
}
h1,
h2 {
text-align: center;
}
#wrapper {
background: #eee;
max-width: 60%;
margin: 0 auto;
overflow: auto;
}
.float {
align-content: center;
margin: 2.5%;
max-width: 20%;
float: left;
text-align: center;
background-color: #eee;
}
img {
display: block;
margin: 0 auto;
clear: both;
max-width: 70%;
image-orientation: 90deg;
}
<h1>Postioning Practice</h1>
<h2>Using Floated Elements</h2>
<div id="wrapper">
<div class="float">
<h3>Position 1</h3>
<p></p>
</div>
<div class="float">
<h3>Position 2</h3>
<p>.</p>
</div>
<div class="float">
<h3>Position 3</h3>
<p></p>
</div>
<div class="float">
<h3>Position 4</h3>
<p>.</p>
</div>
<a href="yingCake.jpeg">
<img src="yingCake.jpeg" alt="Image of Ying eating cake">
</a>
</div>
The credit should go to #zsawaf, but to answer this question. Indicated in the comments image-orientation is only for firefox browsers.
Instead in your css file use:
transform: rotate(90deg);
You need to use "transform: rotate()" instead of image-orientation;
So the css for your image should look like this;
img {
display: block;
margin: 0 auto;
clear: both;
max-width: 70%;
transform: rotate(90deg);
}
<h1>Postioning Practice</h1>
<h2>Using Floated Elements</h2>
<div id="wrapper">
<a href="yingCake.jpeg">
<img src="yingCake.jpeg" alt="Image of Ying eating cake">
</a>
</div>
image-orientation is an experimental feature with limited browser support.
I'm trying to align an image in the center of the page while also aligning some text to the right of the image. How would I do this in either css or html?
Here is my current attempt at this:
.center-img {
display: inline-block;
margin: 0 auto;
}
.center-txt {
display: inline-block;
}
<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
<h1>Home</h1>
</div>
Right now the image is not centered and the text is not centered vertically with the image
Here is a visual representation of what I would like it to look like in the end:
Solution 1:
You can use a div to wrap the image and the text in and use text-align: center along with vertical-align: middle.
.center-img,
.center-txt {
display: inline-block;
vertical-align: middle;
}
#wrapper {
text-align: center;
border: 1px solid red;
}
<div id="wrapper">
<img src="http://placehold.it/100x100" class="center-img" />
<div class="center-txt">
<h1>Home</h1>
</div>
</div>
Solution 2:
Alternatively, you can use a div to wrap the image and the text in and use flexbox. Use justify-content to center your elements horizontally and align-items: center to align them vertically.
.center-img,
.center-txt {
display: inline-block;
}
#wrapper {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
<div id="wrapper">
<img src="http://placehold.it/100x100" class="center-img" />
<div class="center-txt">
<h1>Home</h1>
</div>
</div>
Now to center the above wrapper to the middle of the screen you can use:
#wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Example:
.center-img,
.center-txt {
display: inline-block;
}
#wrapper {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="wrapper">
<img src="http://placehold.it/100x100" class="center-img" />
<div class="center-txt">
<h1>Home</h1>
</div>
</div>
We have a wrapper - div. Div have size 100% width and height of viewport. I give background to div pics and linear-gradient for darken. Div is a flex-block. Inner content aligned to center with justify-content (horizontal) and align-items (vertical). Its all.
ps: Sorry, sorry. Not its all. We go to drink a beer with this ladies. :)))
* {
padding: 0;
margin: 0;
}
div {
background-image: linear-gradient(rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .8) 100%), url("http://beerhold.it/600/400");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
img {
margin-right: 1em;
}
<div class="wrapper">
<img src="http://beerhold.it/100/100">
<p>Lorem ipsum</p>
</div>
To center the image use
img.center{
display:block;
margin:0 auto;
}
wrap both image and text inside a container and add display:flex to it.
then, to center them use align-items: center; and justify-content: center;
see below snippet. let me know if it works for you
for more info about how to center vertically see here -> Vertical Centering with Flexbox
.center-img {
display: inline-block;
margin: 0 auto;
}
.center-txt {
display: inline-block;
}
.container {
width:500px;
height:500px;
border:2px solid red;
display: flex;
align-items: center;
justify-content: center;padding:0 15px;}
<div class="container">
<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
<h1>Home</h1>
</div>
</div>
Just add vertical-align: middle; to class center-img
The vertical-align property sets the vertical alignment of an element.
Using middle place it in the middle of the parent element
.center-img {
display: inline-block;
margin: 0 auto;
vertical-align: middle;
}
.center-txt {
display: inline-block;
}
<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
<h1>Home</h1>
</div>
Use this-
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Right Vertical aligned text</span>
</div>
Refer to this link.
<div class="container">
<img src="img.jpg"/>
<div class="text">
text
</div>
</div>
.container{
text-align:center;
}
img, .text{
display:inline-block;
}
Like this: https://jsfiddle.net/jn4rktaa/
HTML:
<div class="outside">
<div class="inside">
<img src='/img/file.jpg' class="img" />
Test Text
</div>
</div>
CSS:
.outside {
width: 800px;
height: 600px;
border: 1px solid red;
position: relative;
}
.inside {
position: relative;
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
top: calc(50% - 100px); /* THE VALUE (100PX) SHOULD BE HALF OF YOUR ELEMENT'S HEIGHT */
}
.img {
float: left;
}
I'm trying to make a horizontally scrolling div with various other divs inside of it.
<div class="slider">
<div class="item">
<div class="info">
<h1>Title</h1>
</div>
</div>
<div class="item">
<div class="info">
<h1>This is a really long title</h1>
</div>
</div>
<div class="item">
<div class="info">
<h1>Title</h1>
</div>
</div>
</div>
.slider {
white-space: nowrap;
overflow: auto;
}
.item {
display: inline-block;
position: relative;
width: 200px;
height: 150px;
margin: 10px;
background: grey;
}
.info {
position: relative;
height: 100%;
color: #fff;
white-space: normal;
}
The problem I have is that each div has a title, and when it has white-space: normal set and the title is multiple lines, it throws off the alignment of the other divs.
Here is an example of the problem in action: http://jsfiddle.net/ur16gj3m/
Is there a way to get around this? If I change .info to position: absolute, it works. I'd prefer to not use absolute positioning though.
The problem is caused by the default vertical-align: baseline property on inline elements. This causes the blocks to line themselves up with the baseline of the text. This is a problem when the text wraps as the baseline is pushed down.
Set vertical-align: top on .item
Working Example
.slider {
white-space: nowrap;
overflow: auto;
}
.item {
display: inline-block;
position: relative;
width: 200px;
height: 150px;
margin: 10px;
background: grey;
vertical-align: top;
}
.info {
position: relative;
height: 100%;
color: #fff;
white-space: normal;
}
<div class="slider">
<div class="item">
<div class="info">
<h1>Title</h1>
</div>
</div>
<div class="item">
<div class="info">
<h1>This is a really long title</h1>
</div>
</div>
<div class="item">
<div class="info">
<h1>Title</h1>
</div>
</div>
</div>