This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 8 years ago.
I am trying to align text at the bottom of a Div and the Middle of a Div. The CSS attribute
vertical-align:text-bottom; seems to do nothing?
I have 3 divs and would like to center the div xrLabel1 and the other div xrLabel5 to put the text at the bottom.
I have included some sample code.
Thanks
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="format.css"/>
<title></title>
</head>
<body>
<div class="TopMargin">
<div class="xrLabel2">xrLabel2</div>
<div class="xrLabel1">xrLabel1</div>
<div class="xrLabel5">xrLabel5</div>
</div>
</body>
</html>
The CSS file format.css
.TopMargin
{
position:absolute;
left:0px;
top:0px;
height:92px;
width:650px;
background-color:#808080;
color:#000000;
}
.xrLabel2
{
position:absolute;
left:225px;
top:17px;
height:67px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:center;
vertical-align:text-middle;
font-family:Times New Roman ;font-size:9.75pt;text-decoration:underline;
}
.xrLabel1
{
position:absolute;
left:367px;
top:8px;
height:75px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:right;
vertical-align:text-bottom;
font-family:Times New Roman ;font-size:9.75pt;text-decoration:underline;
}
.xrLabel5
{
position:absolute;
left:75px;
top:8px;
height:75px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:center;
vertical-align:text-top;
font-family:Times New Roman;font-size:9.75pt;
}
You need to use display:table on the parent element, and display:table-cell; vertical-align:bottom; for the children. Example here: http://jsfiddle.net/hAScR/
Block elements does not support vertical-align as such. You need to set the display attribute to table-cell. Then you can use vertical-align.
http://jsfiddle.net/kuUHV/
You could use text-align:center on the parent element. And a margin-top on the child element.
<div id="outer"> #text-align:center
<div class="inner">Radom text </div> # margin-top:__
</div>
Fiddle Demo :)
Note: // Don´t use this for responsive Design - when you resize the window the element will stay on the same spot if the element gets to small.
Related
I want to align the date and Summer clearance inside of this table but I want to keep the table centered of the image horizontally. I am open for not using a table to achieve the same effect but I can;'t use Flex. It needs to be supported in most emails.
.outer {
position:relative;
background-color:red;
display:block;
width:650px;
background-image:url(https://blog.prezi.com/wp-content/uploads/2019/03/1_pzUhL5WpOeViwICDDgiLUA.jpeg)
}
.inner {
position:absolute;
width:100px;
height:50px;
background-color:pink;
display:block;
bottom:-25px;
right:50%;
transform: translateX(50%);
margin:auto;
}
.hidden{
visibility:hidden;
}
#img-text{
position:absolute;
bottom:40px;
margin:auto;
width:100%;
font-family:Arial, Helvetica, sans-serif;
color:#ffffff;
text-align:center;
}
<table>
<tr>
<td>
<div class="outer">
<img class="hidden" src="https://blog.prezi.com/wp-content/uploads/2019/03/1_pzUhL5WpOeViwICDDgiLUA.jpeg">
<table id="img-text" align="center">
<tr><td>8/30-9/1</td></tr>
<tr><td>SUMMMER CLEARANCE</td></tr>
<tr><td><h3>20% OFF</h3></td></tr>
</table>
<div class="inner">Hello</div>
</div>
</td>
</tr>
</table>
This is what Ive got to work with. Ive tried using margin:auto and text-align with wrappers but can't find a way to align it left in the middle of the image.
Hope this makes sense :)
#img-text tr td { text-align: left ; }
you can target table data inside it and set align as you wish
I have two divs at the moment that I'm wanting to float on left and right sides however they are both kinda sticking to each other and can't seperate them..
html:
<nav>
<div id="nav_content">
<div id="home_icon" />
<div id="search_icon" />
</div>
</nav>
So I'm trying to float the home_icon to left and search_icon to right:
CSS
nav
{
background:white no-repeat;
width:75%;
height:5em;
margin-left:8em;
}
#nav_content
{
width:100%;
height:100%;
clear:both;
position:relative;
display:inline-block;
float:left;
}
#home_icon
{
background:url(../images/home.png) no-repeat;
width:50px;
height:50px;
top:50%;
position:relative;
transform: translateY(-50%);
transition:ease-in-out 0.5s;
margin-left:1em;
float:left;
display:inline-block;
}
#search_icon
{
background:url(../images/searchicon.png) no-repeat;
width:40px;
height:40px;
top:50%;
transform:translateY(-50%);
transition:ease-in-out 0.5s;
float:right;
display:inline-block;
position:relative;
}
You can't do
<div id="home_icon" />
<div id="search_icon" />
in HTML 5. Because it means the same as
<div id="home_icon">
<div id="search_icon">
which makes the browser think that #search_icon is inside #home_icon.
So, either set the DocType to XHTML or close the divs properly.
Related Question - Are (non-void) self-closing tags valid in HTML5?
jsFiddle - http://jsfiddle.net/9vd01zx5/
You are using wrong HTML closing tags
use:
<div id="home_icon">Left</div>
<div id="search_icon">Right</div>
Remove the text left and right later..
I am trying to create a css hovering effect that the divs with text and a down arrow above the circle should be hidden and when I will hover the circle they should appear.
But I couldn't do this. Below the codes I used.
When I hover on this circle, the above two divs should appear like that
<head>
<title>CSS Hovering Effect Practical Class</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#wrap {
background:#4485F5;
margin:10px 0;
padding:30px;
text-align:center;
}
h1 {
color:#fff;
letter-spacing:2px;
font-size:50px;
margin-bottom:15px;
}
p {
color:#fff;
background:#944E90;
width:600px;
font-size:25px;
padding:3px;
margin:auto;
}
span {
font-style:italic;
}
#features {
margin: 25px 0;
}
#baloon {
color:#ddd;
margin:auto;
padding:15px;
font-size:16px;
letter-spacing:1px;
background:url('bg.png') repeat;
width:200px;
position:relative;
border-radius:5px;
}
#blackarrow {
background:url('blackarrow.png') no-repeat top center;
margin:auto;
height:15px;
width:15px;
margin-top:-7px;
}
#circle {
}
#circle img{
height:50px;
width:50px;
background:#fff;
padding:50px;
border:5px solid #00AEF0;
border-radius:500px;
transition:0.5s ease;
}
#circle img:hover {
height:60px;
width:60px;
background:#ddd;
padding:60px;
border:8px solid #00AEF0;
border-radius:500px;
}
#circle:hover > #baloon {
display: inline;
}
#inner {
}
#img {}
</style>
</head>
<body>
<div id="wrap">
<h1>Welcome to <span> CodeforBusiness</span> Site</h1>
<p>Your trusted web designing service provider for a decade</p>
<div id="features">
<div id="baloon">Best web designing services with our team</div>
<div id="blackarrow"></div>
<div id="circle"><img src="avatar.gif" /></div>
</div>
</div>
</body>
With your markup it's not possible to achieve because the current css selectors cannot target elements which are parents and siblings only in a very limited way via the general sibling combinator~ or the more useful adjacent sibling combinator + (See docs).
You better choose a differently nested structure, to make the hover effect work.
<div id="features">
<div id="circle"></div>
<div id="description">
<div id="baloon">Best web designing services with our team</div>
<div id="blackarrow"></div>
</div>
</div>
Now with the #description div being an adjacent sibling after your circle, you can target it via +. (If you have multiple elements, you need this container, if it's only the one #baloon element inside, you could as well target this directly).
#circle:hover + #description {
display:none;
}
Take a look at my minimal example. You only need some fixing to the positioning and you're done.
As Chad's comment says, ">" is the child selector. Baloon would need to be inside the circle element. What you want is the sibling selector. "+" signifies an adjacent sibling (immediately following), and "~" is the general sibling selector, which is probably what you want:
#circle:hover ~ #baloon
Note that "baloon" has to come AFTER "circle in the markup, so you will need to reprder your elements for this to work. (i.e. put circle first).
As #Chad said, you have structured your CSS in a way that you are not actually selecting the #balloon div on hover. The > selector is the immediate child selector, so in order for the CSS to work the way you wrote it, your HTML will have to look like this:
<div id="wrap">
<h1>Welcome to <span> CodeforBusiness</span> Site</h1>
<p>Your trusted web designing service provider for a decade</p>
<div id="features">
<div id="blackarrow"></div>
<div id="circle">
<div id="baloon">Best web designing services with our team</div>
<img src="avatar.gif" />
</div>
</div>
</div>
This is a doable solution, if you are comfortable changine the structure.
You would change the #balloon styles to something like this:
#baloon {
display:none;
position:absolute;
width:200px;
top:-100px;
left:50%;
margin-left:-115px;
padding:15px;
font-size:16px;
letter-spacing:1px;
background:rgba(0, 0, 0, .5);
border-radius:5px;
color:#ddd;
}
And the #circle & :hover style to this:
#circle {
display:block;
position:relative;
}
#circle:hover > #baloon {
display: block;
}
Let me know if you need any help positioning the balloon.
Here is a working jsfiddle
I cannot seem to get my float to behave as I expect them to. I am attempting to create a four panel setup, like the windows logo. The problem is, the fourth panel keeps staying flush with the last block of the top row. I am running this in IIS6 in IE7. It runs fine in the fiddle below as well as on IIS7, but I cannot get the same behavior in IIS6.
http://jsfiddle.net/9GCrm/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#replist
{
background-color:blue;
float:left;
height:250px;
width:300px;
margin-right:10px;
margin-bottom:10px;
padding:3px;
}
#repedits
{
background-color:blue;
float:left;
height:250px;
width:300px;
margin-bottom:10px;
padding:3px;
}
#mgrslist
{
background-color:blue;
height:250px;
width:300px;
clear:both;
float:left;
margin-right:10px;
padding:3px;
}
#importdiv
{
background-color:blue;
float:left;
height:250px;
width:300px;
padding:3px;
}
</style>
</head>
<body>
<div id="admindiv">
<div id="replist">
</div>
<div id="repedits">
</div>
<div id="mgrslist">
</div>
<div id="importdiv">
</div>
</div>
</body>
</html>
just remove clear:both; from #mgrslist and instead add it as a separate class, like :
<div id="admindiv">
<div id="replist"></div>
<div id="repedits"></div>
<div class="clr"></div>
<div id="mgrslist"></div>
<div id="importdiv"></div>
</div>
demo here
Why it works?? because <div class="clr"></div> will clear the float for all the divs before it but adding it to the class will only clear:float for that particular class and not the pre-divs before that class!!
Also, now that pseudo classes like :before and :after exist, its better practice to use them for clearing a float.
Read this thread to understand it better : replace the clear:both with pseudo class
the code below demonstrates what i am trying to do. why is my "blackOut" div appearing in front of my "theGoods" div? shouldn't the z-index properly handle this?
<html>
<head>
<style>
table.theGoods{
display:block;
z-index:20;
background-color:yellow;
font-family:arial;
font-size:18px;
width:300px;
height:300px;
margin-right:auto;
margin-left:auto;
margin-top:180px;
text-align:center;
}
div.blackOut{
position:absolute;
background-color:red;
width:100%;
height:100%;
padding:0px;
top:0px;
left:0px;
z-index:2;
}
div.behindIt{
z-index:1;
background-color:red;
}
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
</head>
<body>
<table class="theGoods" id="theGoods">
<tr>
<th>
la la
</th>
</tr>
</table>
<div class="blackOut" id="blackOut" onClick="myHider(event)"></div>
</body>
<script>
function myHider(e){
document.getElementById("blackOut").style.display="none";
}
</script>
</html>
z-index:20; has no effect without either position:absolute or position:relative. (You want the latter.)
z-index only affects elements with a position property other than 'static'. If you add position:relative; to table.theGoods, you should be fine. In general, all elements involved in the stacking need to have position:relative or position:absolute.
You cant use z-index without using:
position:absolute;
or:
position:relative;
which is lacking from table.theGoods
You need to add "position: absolute;" to the style for table.theGoods.