I have 3 squares, side-by-side of different heights. I want them to be bottom-aligned with each other, but I want the entire group center-aligned within a containing box.
Seems like putting them in a wrapper whose style is vertical-align:middle should do it. But nope, it doesn't work.
Any suggestions on how to do this?
https://plnkr.co/edit/IjqMn5W8xZxdy0XTWrAw?p=preview
#red {
background-color: #FF0000;
height: 20px;
width: 20px;
}
#green {
background-color: #00FF00;
height: 60px;
width: 60px;
}
#blue {
background-color: #0000FF;
height: 40px;
width: 40px;
}
#container {
width: 300px;
height: 100px;
border: thin solid black;
}
#wrapper {
vertical-align: middle;
}
body {
font-size: 0;
}
<body>
<div id="container">
<div id='wrapper'>
<img id="red" src="">
<img id="green" src="">
<img id="blue" src="">
</div>
</div>
</body>
#container {
display: table;
}
#wrapper {
display: table-cell;
}
http://codepen.io/Deka87/pen/oYXOwg
You should use a table layout if not eager to use flexbox.
Try to use display: flex;.
The #container should have an align-items: center; property, and the #wrapper need an align-items: flex-end;
You can change align-items for this following options:
flex-start: cross-start margin edge of the items is placed on the cross-start line
flex-end: cross-end margin edge of the items is placed on the cross-end line
center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align
stretch (default): stretch to fill the container (still respect min-width/max-width)
Here for more about Flex
And back to your question. Look at this example:
#red {
background-color:#FF0000;
height: 20px;
width: 20px;
}
#green {
background-color:#00FF00;
height: 60px;
width: 60px;
}
#blue {
background-color:#0000FF;
height: 40px;
width: 40px;
}
#container {
display: flex;
align-items: center;
width: 300px;
height:100px;
border: thin solid black;
}
#wrapper {
display: flex;
align-items: flex-end;
}
body {
font-size:0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="container">
<div id='wrapper'>
<img id="red" src="">
<img id="green" src="">
<img id="blue" src="">
</div>
</div>
</body>
</html>
Fiddle demo
Related
My goal: A responsive navbar where the logo is always in the middle and an element
is always on the left. Depending on the context (page dependent), buttons can be
displayed in the right area or not.
My approach: I use a flexbox for the navbar. I have three divs in the flexbox. I have given all divs a fixed width. The middle box is also a flexbox. The div with a logo is located there. I position the logo on the right edge of the middle flexbox. The div with the logo has a fixed width (80px).
The problem: The approach works but I don't find this way very nice. Because the widths are dependent on each other. If you would change the logo and it would be wider or narrower then you would have to adjust the relative width of the middle and right box. The second problem is if the device smaller as 900px then this solution dont work.
Question: What other possibilities are there and what possibilities would resolve this "width" dependency?
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
header {
height: 80px;
display: flex;
justify-content:space-between;
}
.header-left {
width:20%;
background: green;
}
.header-middle {
width:34%;
background: gray;
display: flex;
justify-content:flex-end;
}
.header-right {
width:46%;
background: green;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;font-size:70px;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
</div>
</div>
You can use flex-grow: 1 on the left and right elements, the middle element will be in center naturally. In this case, you don't need to set widths on elements.
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
header {
height: 80px;
display: flex;
justify-content:space-between;
}
.header-left {
flex-grow: 1;
background: green;
}
.header-middle {
background: gray;
display: flex;
justify-content:flex-end;
}
.header-right {
flex-grow: 1;
background: green;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;font-size:70px;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
</div>
</div>
Since you're looking for different possibilities i'll suggest you to take the approch used by Tepken Vannkorn :
Centering brand logo in Bootstrap Navbar
Based on your comments, I would suggest the following code as a simple solution.
I have added a max-width value to your .logo CSS class and I have also moved your inline CSS from the front-end code, and created a .controller CSS class for it.
#app {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
header {
height: 80px;
display: flex;
justify-content: space-between;
}
.header-left {
width: 20%;
background: green;
}
.header-middle {
width: 34%;
background: gray;
display: flex;
justify-content: flex-end;
}
.header-right {
width: 46%;
background: green;
}
.logo {
background-color: red;
width: 80px;
height: 80px;
text-align: center;
font-size: 70px;
max-width: 80px;
}
.controller {
width: 50%;
background: black;
color: white;
text-align: center;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div class="controller">Controller Div 50%</div>
</div>
</div>
A solution would be to use a mix of flex and position: absolute. Then you need only the left and the right container. the logo you can center with position left: left: calc(50% - calc(80px / 2));. The 80px is the width from your logo.
* {
margin: 0;
padding: 0;
}
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
.header {
display: flex;
justify-content: space-between;
height: 80px;
background: yellow;
position: relative;
}
.header-left {
background-color: green;
width: 20%
}
.header-right {
background-color: green;
width: 44%;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;
font-size:70px;
position: absolute;
left: calc(50% - calc(80px / 2));
}
<div id="app">
<div class="header">
<div class="header-left">left</div>
<div class="logo">X</div>
<div class="header-right">right</div>
</div>
<div style="width:50%; background: black;">Controller Div 50%</div>
</div>
I have enclosed an image inside a nested div .box. If it is not floated the image can be exactly centered to the .box, but when I float it left or right the center alignment goes away! I have 4 images with various sizes that need te be centered inside their own .box. How can I fix it?
HTML
<div class="con">
<div class="box">
<img src="../_images/icon-test.png">
</div>
</div>
CSS
.con {
width:300px;
height:200px;
background: #996600;
}
.box {
position:relative;
width:150px;
height:150px;
background-color: #333333;
display:table-cell;
text-align:center;
vertical-align:middle;
float:right;
}
You can use display: flex for this.
Change your display: table-cell to display: flex.
Then change text-align:center; and vertical-align:middle; to align-items: center; and justify-content: center; to center it vertically and horizontally.
Edit: Then I have also added a max-width of 150px to the image, to stop it expanding out of the container when the image is bigger than it. Props to #Hkidd for pointing out that this happens.
.con {
width: 300px;
height: 200px;
background: #996600;
}
.box {
position: relative;
width: 150px;
height: 150px;
background-color: #333333;
display: flex;
align-items: center;
justify-content: center;
float: right;
}
img {
max-width: 150px;
}
<div class="con">
<div class="box">
<img src="http://placehold.it/200x100">
</div>
</div>
Explanation
I think you have to position the img absolute, so it will be positioned absolute to its parent .box since .box is positioned relative. Also the display: table-cell; is unnecessary since the img is not inside a table.
This is what I came up with:
.con {
background: #996600;
height: 200px;
width: 300px;
}
.box {
background-color: #333333;
float: right;
height: 150px;
position: relative;
width: 150px;
}
.box img {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 90%;
}
<div class="con">
<div class="box center">
<img src="http://placehold.it/120x100">
</div>
</div>
If you have a single image as in the question, you can use the line-height solution which places the image exactly in center of the .box div & use vertical-align: middle on the image. Works on all browsers & simple to understand.
Refer code:
.con {
width: 300px;
height: 200px;
background: #996600;
}
.box {
position: relative;
width: 150px;
height: 150px;
background-color: #333333;
text-align: center;
vertical-align: middle;
float: right;
line-height: 150px;
}
img {
height: 60px;
vertical-align: middle;
}
<div class="con">
<div class="box">
<img src="http://www.w3schools.com/css/img_fjords.jpg">
</div>
</div>
I have multiple canvases that I want to display adjacent to each other. I'm not the most familiar with CSS but I've tried placing them all in a div that is centered, with each under a specific float (canvas_left set to float left, canvas_center set to canvas center, or canvas_right set to float right). For some reason I can't get them all be to adjacent and centered horizontally on the screen.
CSS:
.left {
display: block;
float: left;
}
.center {
display: block;
margin: auto;
}
.right {
display: block;
float: right;
}
HTML:
<div class="center">
<canvas id="canvas_left" class="left" width="150px" height="400px"></canvas>
<canvas id="canvas_main" class="center"></canvas>
<canvas id="canvas_right" class="right" width="150px" height="400px"></canvas>
</div>
If you know how to fix this, please let me know.
There is no float center. You layout doesn't work because the main canvas is a non-floated block.
Using floats is probably a bad idea anyways. Better use inline-blocks:
.wrapper {
text-align: center;
}
canvas {
border: 1px solid;
width: 25%;
display: inline-block;
}
<div class="wrapper">
<canvas id="canvas_left"></canvas>
<canvas id="canvas_main"></canvas>
<canvas id="canvas_right"></canvas>
</div>
Or flexbox, the modern way to do it:
.wrapper {
display: flex;
justify-content: center;
}
canvas {
border: 1px solid;
width: 25%;
}
<div class="wrapper">
<canvas id="canvas_left"></canvas>
<canvas id="canvas_main"></canvas>
<canvas id="canvas_right"></canvas>
</div>
I suggest using flexboxes, you can do almost anything with that.
Also the container class is the same as the child one, you should change that, like so:
<div id="canvas">
<canvas id="canvas_left" class="left" width="150px" height="400px"></canvas>
<canvas id="canvas_main" class="center"></canvas>
<canvas id="canvas_right" class="right" width="150px" height="400px"></canvas>
</div>
#canvas {
display: flex;
justify-content: center;
}
.left { background: green; flex-shrink: 0; }
.center { background: blue; flex-shrink: 0; }
.right { background: purple; flex-shrink: 0; }
JSfiddle: jsfiddle.net/8uv2zowm
You need to float all canvas tags. Change your CSS:
.left {
display: block;
float: left;
}
.center {
display: block;
margin: auto;
float: left;
}
.right {
display: block;
float: left;
}
But be aware that when changing display width, the canvas tags will again be aligned under each other.
Play around here.
I think this is what you want to achieve.
CSS
.container {
float: left;
}
.left {
display: inline-block;
width: 150px;
height: 400px;
background-color: red;
}
.center {
display: inline-block;
width: 150px;
height: 400px;
background-color: blue;
}
.right {
display: inline-block;
width: 150px;
height: 400px;
background-color: green;
}
HTML
<div class="container">
<canvas id="canvas_left" class="left"></canvas>
<canvas id="canvas_main" class="center"></canvas>
<canvas id="canvas_right" class="right"></canvas>
</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'm relatively new to some concepts in HTML and CSS and this one I can't seem to wrap my head around. I'm trying to align two floating <p> elements to both sides of a centered <img>. Here's what I'm basically trying to achieve.
I want the two texts to stick to the sides of the centered image even when the window is at full width. I have it working only when I resize the window to the point where they're squished to the sides of the image.
.header {
margin-top: 85px;
text-align: center;
}
<div class="header">
<p style="float: left; margin-top: 115px;">listen</p>
<img id="main_cover" src="img/into-me.png" width="250" height="250" draggable="false">
<p style="float: right; margin-top: 115px;">download</p>
</div>
Any help is appreciated, especially since this may be a dumb question. Thanks in advance.
You can use Flexbox or CSS tables Fiddle
.content {
display: flex;
align-items: center;
justify-content: center;
}
<div class="content">
Listen
<img src="http://placehold.it/250x250">
Download
</div>
Do this...
<div class="header">
<p>listen</p>
<img id="main_cover" src="img/into-me.png" width="250" height="250" draggable="false">
<p>download</p>
</div>
And your CSS...
.header { width: 400px; margin: 0 auto}
.header img { margin: 0 20px; float: left; }
.header p { margin: 115px 0 0; float: left;}
You could have just given the container a defined width so the floated elements wouldn't float further away as the window size changes:
.header {
margin-top: 85px;
text-align: center;
width: 370px;
margin: 0 auto;
}
https://jsfiddle.net/8sfvgvgr/
How about flexboxes to obtain this?
header{
display: flex;
justify-content: space-around;
align-items:center;
}
span{
text-align:center
}
img{
margin-left: 10px;
margin-right: 10px;
width: 250px;
}
<header>
<span>Text</span>
<img src="https://pixabay.com/static/uploads/photo/2014/07/27/20/29/landscape-403165_960_720.jpg" alt="Landascape">
<span>Text</span>
</header>
You can do this with Flex.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
}
.flex-item {
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">listen</div>
<div class="flex-item">Image </div>
<div class="flex-item">Download</div>
</div>
</body>
</html>