I have a very simple HTML/CSS webpage.
I have three images arranged horizontally on the page, like so:
I'd like to center them on the page, like so:
What's the fix?
Here's the (not-working) code I'm currently using:
.sketches {
align-content: center;
}
img {
border-radius: 50%;
border: 1px solid #000000;
}
<div class="sketches">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
Since <div> by default is a block element and <img> is an inline-block element, if you wanna center images horizontally, it's enough to set text-align: center; to div container:
.sketches {
text-align: center;
}
img {
border-radius: 50%;
border: 1px solid #000000;
}
<div class="sketches">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
Here's the solution:
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.sketches {
align-content: center;
margin-left: auto;
margin-right: auto;
}
img {
border-radius: 50%;
border: 1px solid #000000;
}
<div class="outer">
<div class="middle">
<div class="sketches" align=center>
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
</div>
</div>
Used technique to center vertically from here.
CSS
a) .sketches selector
1) Insert display: flex; declaration
2) Instead of the CSS property: align-content add justify-content
.sketches {
display : flex;
justify-content : center;
/* can be removed */
min-width : 350px;
}
img {
border-radius: 50%;
border: 1px solid #000000;
}
<div class="sketches">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
Related
I need to position elements on a side like in the image above and have onclick function on them to show the corresponding text. Any info on how to best achieve this to be responsive?
By responseive i mean that the dots and text should always stay on the same position relative to the size of the bottle.
What I did was to put everything inside the container div and then positioned the elements relative to that div and the bottle image absolute to the container div.
It kinda works when container div has fixed dimensions, but I guess there are better ways to do it.
EDIT: Added code! I suck at formatting, sorry.
<div class="bottle-one">
<div class="bottle-one-content">
<div class="bottle-one-image">
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
</div>
<a href="#msg1" class="droplet droplet1 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
<a href="#msg2" class="droplet droplet2 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
</div>
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
<a href="#msg3" class="droplet droplet3 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
</div>
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
<a href="#msg4" class="droplet droplet4 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
</div>
<img src="assets/images/bottle1.png" alt="" class="bottle-one-bottle">
</div>
</div>
.bottle-one {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 30%;
}
.bottle-one-image {
height: 100%;
position: relative;
width: 251px;
}
.message {
left: -340px;
top: 180px;
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
text-transform: uppercase;
font-size: .7rem;
color: #004197;
height: 30px;
width: 400px;
margin-bottom: 1rem;
}
.message-hidden {
display: flex;
}
.message-hidden div:nth-of-type(1) {
text-align: right;
font-family: 'BrandonGrotesqueWeb-Black', sans-serif;
letter-spacing: 2px;
border-right: 1px solid #004197;
width: 70%;
}
.message-hidden div:nth-of-type(2) {
width: 30%;
display: flex;
overflow:hidden;
}
I came up with this to help you with aligning your element to the left of a div.
By using a mix of [psuedo-elements] and floats, I think this gives you the desired effect you are looking for. Post your code and I'll be more then happy to help you with the other part.
html {
width: 550px;
border: none;;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
height:200px;
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.sibling {
border: 3px solid red;
height:200px;
}
.sibling.root:after {
content: 'Sibling';
color: green;
}
.float {
float: left;
border: 3px solid blue;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'floated Element';
color: red;
}
.root {
overflow: hidden;
}
<div class="float">
</div>
<div class="sibling root">
</div>
Hi Everybody and tks in advance for your help... I'm looking for the best practice to resolve a simple question:
.left {
float: left;
width: 79%;
margin-right: 1%;
}
.left img {
float: right;
}
.right {
float: right;
width: 20%;
}
<div class="main">
<div class="left">
<img src="http://placehold.it/200x200" />
</div>
<div class="right">A TEXT</div>
</div>
How should I center the text vertically at the middle of the image (obviusly not using px in margin-top or bottom, because the width/height of the image will be dinamic).
Thanks!
You could use flexbox. See the example:
.main{
display: flex;
align-items: center;
}
https://jsfiddle.net/zb2ozq1k/1/
I'd get rid of float and use table-cells instead. Then, use vertical-align:middle for the text.
Like this:
.main{
display: inline-table;
border: 1px solid blue;
}
.left {
width: 79%;
margin-right: 1%;
display: table-cell;
border: 1px solid green;
}
.right {
width: 20%;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
<div class="main">
<div class="left">
<img src="http://placehold.it/200x200" />
</div>
<div class="right">A TEXT</div>
</div>
h1 {
display: inline;
vertical-align:top;
}
<div class="middle">
<img src="http://placekitten.com/200/150" >
<h1>A TEXT</h1>
</div>
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 have a simple demo of an error I found. There is a flex div and a few images inside.
The sizes of the div and the images are unknown, I put some fixed values just to represent the problem.
The problem is that the images are not overflowing the div's width in FF, but they do in Chrome (the expected and desired behavior).
The main goal is to make only 3 images to be visible (33.3333% of the div's width for each image), even if there are more than 3 images.
Demo: http://codepen.io/alexandernst/pen/mPoeLP
HTML:
<div class="wrapper">
<img class="box" src="http://placehold.it/150x150">
<img class="box" src="http://placehold.it/150x150">
<img class="box" src="http://placehold.it/150x150">
<img class="box" src="http://placehold.it/150x150">
<img class="box" src="http://placehold.it/150x150">
</div>
CSS:
.wrapper {
border: 1px solid red;
width: 400px;
height: 200px;
display: flex;
overflow: hidden;
}
.box {
border: 1px solid green;
max-width: 33.33333%;
position: relative;
padding-right: 10px;
align-self: center;
}
I'd suggest wrapping each of the images in a div and use the .box class on that instead.
Seems to work in Chrome 51 + FF 46
* {
box-sizing: border-box;
}
.wrapper {
border: 1px solid red;
width: 400px;
height: 200px;
display: flex;
align-items: center;
overflow: hidden;
}
.box {
border: 1px solid green;
flex: 0 0 33.33333%;
position: relative;
padding-right: 10px;
}
.box img {
width: 100%;
height: auto;
display: block;
}
<div class="wrapper">
<div class="box">
<img src="http://placehold.it/150x150">
</div>
<div class="box">
<img src="http://placehold.it/150x150">
</div>
<div class="box">
<img src="http://placehold.it/150x150">
</div>
<div class="box">
<img src="http://placehold.it/150x150">
</div>
<div class="box">
<img src="http://placehold.it/150x150">
</div>
</div>
It is because you have padding-right. Try adding box-sizing: border-box;:
.box {
border: 1px solid green;
max-width: 33.33333%;
box-sizing: border-box;
position: relative;
padding-right: 10px;
align-self: center;
}
box-sizing will take padding in its calculations.
Updated codepen.
I'm making an image view thing, and am having some trouble with aligning the images. When I have two of the same image in a row, it will be aligned, but when the images are different, the second image will go lower than the first. Here is screenshot screenshot. Here is my html and css
html
<div id="wrapper">
<div id="images">
<div class="image" onClick="showimage('users/images/username/battlefield4_maars.png','battlefield4_maars.png','3.91MB','png');">
<img src="users/images/username/battlefield4_maars.png">
<div class="normaltext">battlefield4_maars.png</div>
</div>
<div class="image" onClick="showimage('users/images/username/dark_souls_2.jpg','dark_souls_2.jpg','363KB','jpg');">
<img src="users/images/username/dark_souls_2.jpg">
<div class="normaltext">dark_souls_2.jpg</div>
</div>
<div class="image" onClick="showimage('users/images/username/thief.jpg','thief.jpg','393KB','jpg');">
<img src="users/images/username/thief.jpg">
<div class="normaltext">thief.jpg</div>
</div>
</div>
</div>
css
#images {
margin-top: 20px;
display: inline-block;
}
.image {
height: 200px;
width: 140px;
border: 1px solid #cccccc;
border-radius: 3px;
background: #fff;
display: inline-block;
word-wrap:break-word;
padding: 10px;
cursor: pointer;
}
.image img {
width: 140px;
height: 140px;
}
Anyone know what's wrong here?
add this:
#images {display:block;}
.image {
vertical-align: top;
}