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;
}
Related
I am trying to create a horizontal line inserted between the image and text using html and css.
The image is on the very left side of the screen, and the text is on the very right side of the screen. Then the horizontal line inserted "IN THE MIDDDLE" and "VERTICALLY ALIGN CENTER"
I am now facing a very strange problem.
1. If i increase the width of hr over than 80% the text next to it will be break to new line
If I scale down the screen the text next to it will also break into a new line, how can I make it responsive without breaking into a new line.
I am very new to html and css please kinldy suggest, I have tried reading and finding solution in the forum it seems very difficult to understand and difficult to be applied
I am very new to html and css please kinldy suggest, I have tried reading and finding solution in the forum it seems very difficult to understand and difficult to be applied
hr{
display: inline-block;
margin:auto;
width:80%;
}
img {
vertical-align: middle;
display: inline-block;
height: 70px;
width: 70px;
border: 1px solid red;
}
p {
display: inline-block;
vertical-align: middle;
}
<img src ="example" alt="Product Image"><p>Healthy Cake</p><hr><p style="padding: 10px; background-color: green;">Promotional Price</p>
</html>
hr should be used to divide elements vertically not horizontally but you can manage this using flexbox on a wrapper
.wrap {
display: flex;
align-items: center ;
}
hr {
flex:1
}
<div class="wrap">
<img src="http://www.fillmurray.com/g/140/100" alt="">
<hr>
<p>Product Description</p>
</div>
Try this and it may be solve your problem,
Add margin-top: 25px; to your <hr> style and add margin-top: 0px; to your <h2> style
I have tried the above mentioned styles and i got like the below screenshot.
Complete noob here with HTML/CSS.
I'm trying to get something like this : http://imgur.com/Bc72V4M
Here is my code:
<div id="topbar">
<div class="image">
<img src="images/ghwlogo.png">
</div>
<div class="text">
<h1>TEXT TEXT TEXT TEXT TEXT</h1>
</div>
</div>
I've tried floating the div topbar, then display-inline but it never displays horizontally.
I'm so confused. Following tutorials is easy-peasy, but when you need to figure out how to do this yourself, it's completely different.
I think I'm missing a step somewhere. I feel like this should be really easy but it's not.
img {
display: inline;
vertical-align: middle;
}
.subhead {
display: inline;
vertical-align: middle;
}
<div>
<img src="http://dummyimage.com/100x100/000/fff"/>
<h1 class='subhead'>
TEXT
</h1>
</div>
I removed some HTML; I only add more when I can't think of how to get the effect with just CSS. You can add some back, but you may have to set display: inline on some inner elements then.
Generally, a few different ways of putting elements horizontally:
Floating: Removes it from standard flow layout, and may interfere with the root element's total height. Was previously the preferred method of placement but I feel like there are better alternatives.
Display Inline: Treats an element a bit like text. Cannot have a custom height or various other attributes.
Display Inline-Block: Often a "fix-all" for me when I want something laid out horizontally, but to have other styling aspects like height, border, etc.
Position Absolute: You can make a higher element a "relative element" for absolute positioning by setting position: relative on it. Like floating this takes it out of layout, but it can even overlap elements; useful for certain things. Don't rely on absolute pixel amounts too much.
In my case, once things are laid out horizontally, vertical alignment is the next issue. Remember that adding content could make this block very very tall, so you can't just say "vertical-align to the bottom of the thing". Think of all elements in the div as simply letters in a paragraph; for the smaller ones, you're telling it how to align that one letter. For the biggest ones, you're telling it where that "letter" is aligned compared to the others. So, it's important to set vertical alignment how you want it on the image as well.
EDIT: updated answer per #Katana314 answer. I've maintained the OP's markup.
#topbar {
width: 100%;
overflow: hidden;
}
.image {
display: inline-block;
vertical-align: middle;
border: 5px solid black;
height: 100px;
width: 100px;
}
.text {
display: inline-block;
vertical-align: middle;
}
Fiddle: https://jsfiddle.net/dgautsch/che0dtfk/
You could make the image and the text a separate div and then have both of them under the inline-block attribute. The text div would need to have a position: absolute attribute, though, for formatting purposes.
After viewing the Fiddle, you can adjust the left position attribute accordingly to generate space. Here is the link: https://jsfiddle.net/kuLLd866/.
HTML:
<body>
<div class="image">
<img src="http://gfx2.poged.com/poged/game_logo_default_fix.png?2492">
</div>
<div class="imagetext">
<h1>Text text text</h1>
</div>
</body>
CSS:
.image {
display: inline-block;
}
.imagetext {
position: absolute;
top: 50px;
display: inline-block;
}
i'm with some problems here.. I've tried a lot of different fixes for this, but none of them seems to work. I want to align the content of a div in the middle of another div.
I want to use only auto or % values because i want to make the website also for mobile devices.
This is the code i have so far: http://codepen.io/anon/pen/xHpaF/
I want to make those red boxes aligned to the center of the wrap div.
If anyone can help me. Thanks!
Well, first of all, your <div id="content" /> is an ID, not a class. So change your .content in the CSS to #content. Second of all, float throws off the text-align: center;. If you remove that, and set it to display: inline-block;, it should fix your issues:
check it here: http://codepen.io/anon/pen/ncviE/
css changes:
#content {
width:auto;
height:250px;
margin:0 auto;
background:#0C0;
display:table-cell;
text-align:center;
}
.view {
display: inline-block;
float: none;
}
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.
I have some page layouts that require multiple columns and all of their content needs to be vertically aligned to the top since different columns will have more/less text than others.
I did the layout using the table-cell property so I could use vertical-align, which doesn't work with blocks as far as I know, but I just realized that the display: table-cell property doesn't work with IE 7 or below, which is a big no-go.
Anybody know how to vertical align in divs, or a fix for <= IE7 ?
It sounds like you want specifically-sized floating divs. Something like this:
<div id="wrapper">
<div id="left">Test</div>
<div id="center">more text</div>
<div id="right">Even more</div>
</div>
And the CSS:
#left { float: left; width: 200px; }
#center { float: left; width: 400px; }
#right { float: right; width: 200px; }
I think the answer above is a good idea, or you could use something like a jquery plugin.
http://www.seodenver.com/simple-vertical-align-plugin-for-jquery/