This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
How to align a div to the left and another div to the center?
(2 answers)
Closed 4 years ago.
I currently have a "header" div which contains the title of my site and an image of the product. The title is an h1 (heading) and the image is supposed to be floated to the left. I am centering the heading with text-align: center and using float: left on the image. The problem is that the image takes space and moves my title to the left which makes it look very strange when you compare it to the footer which is correctly centered.
It is possible that this is a duplicate of a common problem but due to my limited knowledge in CSS terms, it makes it very hard to find the answer by a Google search. I've used multiple search phrases but I've yet to find anyone with a similar problem.
I've tried multiple ways such as using position: absolute and similar ways which don't seem to work. I've also tried putting the img and h1 in a different order in the HTML, if I put the image after the heading it will cause the image to "drop down" under the whole div and this looks even odder.
Code (HTML & CSS)
| HTML
<div class="header">
<img src="assets/image/Logo-small.png">
<h1>Llama Capture</h1>
</div>
| CSS
.header {
width: 100%;
height: 6%;
text-align: center;
background-color: black;
}
.header img {
height: 100%;
float: left;
}
I expect the heading to be fully centered just as the footer is and I thought text-align would work without the influence of other elements in the div. The actual result would definitely irritate someone with an eye to detail.
I am thankful for anyone that could point me in the right direction, I might have overlooked this problem and so I'm happy if someone more experienced could share their knowledge on this.
use position:absolute; and left: right: values instead of float:right/left
.header {
width: 100%;
background-color: black;
color:#fff;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
.header img {
height: 100%;
position:absolute;
left:10px;
top:50%;
transform:translateY(-50%);
}
<div class="header">
<img src="https://picsum.photos/20">
<h1>Llama Capture</h1>
</div>
Related
Yes, obviously I'm doing it wrong. Why can't it be as easy as horizontally aligning stuff? I sit and my work is halted for hours on end trying to look up how to vertically align in the middle, so I don't have to bug you guys with my stupid most-likely really easy to you question.
Display Block or Table-Cell, everything I read never works. I thought "maybe if I horizontally align my img with .divID img and then vertically align the div itself" sadly, I wish that'd work. But even when I did try centering the div vertically in the middle, it messed up the image centering and didn't even work.
TL;DR: I hate trying to vertically align stuff so much.
I'm trying to get my header image centered vertically and horizontally. This my code I'm working off.
HTML
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="http://i.imgur.com/d0umnxt.png" />
</div>
</div>
</div>
CSS
body {
margin: 0px;
}
#header {
width: 100%;
height: 100px;
background-color: #151B1F;
}
#logo {
display: block;
margin: auto;
}
I hate table and table-cell just as much as the next guy, but when you know the height of the parent element (#header in your case), things become really easy.
Here's a working fiddle.
You just need to add the following styles to your CSS:
#header {
display: table;
}
#logo {
display: table-cell;
vertical-align: middle;
text-align: center;
}
I am implementing a carousel with images. The carousel is 960px wide, and contains 5 images in containers of width 960px/5 = 192px (and height 119px).
I want the images to be as large as possible inside their containers, without changing the aspect ratio of the images. I also want the images to be centered both horizontally and vertically within their container.
By hacking around for hours, and using the center tag, I have managed to construct what I describe above. Please see a fiddle here.
The problem is with the container of the second image (as shown by the black border). While the second image is centered horizontally, the container is shifted down a little.
I'm trying to implement an overlay on the images, and need the containers to all be at the same height. How can I have the containers all at the same height? Is there a better/cleaner approach that does not use the center tag?
You could add vertical-align:top; to your #carousel-images .image{} css
Or middle or bottom...
Uh? Why did I get downvoted on this?
http://jsfiddle.net/y2KV7/
I got it to work by doing the following:
HTML:
<div id="wrapper">
<div id="carousel-images">
<img src="http://eurosensus.org/img/initiatives-300/30kmh.png" />
<img src="http://eurosensus.org/img/initiatives-300/affordableEnergy.png"/>
<img src="http://eurosensus.org/img/initiatives-300/basicIncome.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/ecocide.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/educationTrust.jpg"/>
</div>
</div>
CSS:
#wrapper
{
width: 100%;
text-align: center;
background: blue;
}
#carousel-images
{
width: 960px;
white-space: nowrap;
font-size: 0;
margin: 0 auto;
}
#carousel-images img
{
display: inline;
max-width: 192px;
max-height: 119px;
border: 1px solid black;
vertical-align: middle;
}
Click here to view working jsFiddle demo
First, don't make the world come back to 10 years ago. do not use tag for formating. I would also suggest you to get some reading about different between div and span as well as display attribute. you could easily find information on http://www.w3schools.com.
if you want a center container. you could use css margin auto trick.
like margin:5px auto; would center the container horizontally.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How do I get a div to float to the bottom of its container?
I have this code to float a div to the bottom right side of a div. But the span gets stuck to the upper left.
<div id="color_tile" class="select_tile" title="Choose color" style="background: grey; background-image: url(wallpaper/201_color_picker.jpg);" >
<span id="color_picker" style="visibility: visible; display: block; float: right; vertical-align: bottom;"></span>
</div>
Is there a different way to place the span?
You should probably separate your HTML/CSS from each other properly.
Your code could look something like this
HTML:
<div>
<span>Absolute right bottom aligned to div...</span>
</div>
CSS:
div { position: relative; }
div > span { position: absolute; right: 0; bottom: 0; }
Obviously your div should have some height/width which exceeds that of the span, but generally this is a very acceptable way of doing it.
This doesn't make the content of the div 'flow' around the span but that wasn't specified clearly. As said, what you have there should work in that case and if it doesn't it is in the rest of your code.
vartical-align is very particular to get to work (which is why I almost never use it)
On the span:
position:absolute; bottom:0; right:0;
and put a height/width on the parent div and you'll be all set
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS - Equal Height Columns?
I need to have my container with a kind of elastic height if possible, and if not I just want my menu in sidebar height, to get the same height as the video container, as it is described here:
http://clientes.ivopereira.net/nocktv/
Any ideas how to get this done? I've tried to mix the two columns (the sidebar and the video container) into one, and tried to specify a height of 100% so therefore the div left (the column left) could maximize itself as the maximum as it cans.
Any suggestions?
You can't actually achieve "equal height" columns. The closest workaround that I normally recommend to use is using the Faux Columns technique.
However, looking more closely at your example link, it looks like you want your sidebar to be aligned to the bottom, not the top. I threw together a quick example of how you might want to achieve this effect. You can combine it with the Faux Columns technique as well. I'm assuming you have some proficiency in HTML and CSS, but feel free to ask any questions if you need help.
HTML:
<div id="container">
<div class="sidebar">
</div><div class="main">
</div>
</div>
CSS:
#container {
white-space: nowrap;
text-align: center; }
#container > div {
white-space: normal;
text-align: left;
display: inline-block; }
.sidebar {
background: red;
width: 200px;
height: 100px; }
.main {
background: blue;
width: 300px;
height: 200px; }
Preview: http://jsfiddle.net/Wexcode/8SnGS/
Just use display: table and table-cell: http://jsfiddle.net/8BXGD/
I've used Blueprint to prototype a very simple page layout...but after reading up on absolute vs. relative positioning and a number of online tutorials regarding vertical positioning, I'm not able to get things working the way I think they should.
Here's my html:
<div class="container" id="header">
<div class="span-4" id="logo">
<img src="logo.png" width="150" height="194" />
</div>
<div class="span-20 last" id="title">
<h1 class="big">TITLE</h1>
</div>
</div>
The document does include the blueprint screen.css file.
I want TITLE aligned with the bottom of the logo, which in practical terms means the bottom of #header.
This was my first try:
#header {
position: relative;
}
#title {
font-size: 36pt;
position: absolute;
bottom: 0;
}
Not unexpectedly, in retrospect, this puts TITLE flush left with the left edge of #header...but it failed to affect the vertical positioning of the title. So I got exactly the opposite of what I was looking for.
So I tried this:
#title {
position: relative;
}
#title h1 {
font-size: 36pt;
position: absolute;
bottom: 0;
}
My theory was that this would allign the h1 element with the bottom of the containing div element...but instead it made TITLE disappear, completely. I guess this means that it's rendering off the visible screen somewhere.
At this point I'm baffled. I'm hoping someone here can point me in the right direction. Thanks!
don't go changing positioning or floating of the blueprint classes. That will mess up the framework.
What you are trying to do is going to be difficult, because what you are trying to do (I assume) is align the baseline of the type with the bottom of the image. There is no easy way to determine the baseline of type via CSS. So getting them aligned is going to be entirely dependent on the particular font that loads for your user. If your image is 50px high, you could start by setting the line height of your h1 to 50px and then tweak from there. But understand that there will be variance from browser to browser, font to font.
You're probably better off making your headline part of the image then use some image replacement techniques to hide the text.
Give this a go and let me know if it is what you are trying to achieve?
HTML:
<div id="container">
<div class="logo">Logo here</div>
<h1>TITLE</h1>
</div>
CSS:
#container{
background-color:#ccc;
position:relative;
width:300px;
height:200px;
}
.logo{
width:110px;
height:40px;
background-color:#ff0000;
margin: 0 auto;
}
#container h1{
font-size:120%;
font-weight:bold;
text-align:center;
}
Here's a live demo: http://jsfiddle.net/jrLL2/