How can i align text and image verticle align middle ??
jsfiddle demo here : http://jsfiddle.net/j3wDP/
My CSS:
.rating{
border: 1px solid red;
font-family: verdana;
font-size: 12px;
width: 180px;
height: 20px;
}
span img{
width: 20px;
height: 20px;
padding: 0px 3px;
}
My HTML:
<body>
<div class="rating">Rating <span><img src="like.jpg">233<img src="dislike.jpg">100</span></div>
</body
add some property
span img{ vertical-align:middle;}
See DEMO
Demo
.rating{
border: 1px solid #8e8e8e;
font-family: verdana;
font-size: 12px;
width: 180px;
line-height:50px;
height: 50px;
}
span img{
width: 20px;
height: 20px;
padding: 0px 3px;
}
You can use line-height
Change your css like this
.rating{
border: 1px solid #8e8e8e;
font-family: verdana;
font-size: 12px;
width: 180px;
height: 20px;
line-height:20px;
}
span img{
width: 20px;
height: 20px;
padding: 0px 3px;
vertical-align:middle;
}
the best way is to use Line-height or us can use
.rating{
display:table-cell;
vertical-align:middle;
}
There are different solutions. You can wrap your content into two (e.g. div-)containers and handle them like a table. Something like that:
<div style="display:table; height: 200px; background:red;">
<div style="display:table-cell; height:200px; vertical-align:middle">
<span>Your Content</span>
</div>
</div>
it's important to give them a height property and use display: table and display:table-cell instead of it. another way is to center this span with position: absolute:
<div style="height:200px; background:red; position:relative">
<span style="height:20px; position:absolute; top:50%; margin-top:-10px;">Your content</span>
</div>
In that example the margin-top value is calculated by the half value of the height (height: 20px = margin-top:-10px). But I would prefer the first way.
Related
I would like to have text inside the element to be aligned such that it begins from the bottom of the page. I want it so that as I increase or decrease the width of the div, the text fills up the bottom first before the top.
I want to look like the following design from adobe illustrator:
Instead, it looks like the following:
the code used in the second image is below:
<style media="screen">
*{
font-family: 'Heebo', sans-serif;
}
.big-intro-text{
font-size: 100px;
width: 100%;
position: absolute;
}
.big-intro-text div{
border: solid 1px green;
text-align: left;
color: gray;
max-width: 800px;
height: auto;
display: inline-block;
vertical-align: text-bottom;
}
</style>
<div class="big-intro-text" align = "center">
<div>home of the zebras</div>
</div>
* {
font-family: 'Heebo', sans-serif;
}
.big-intro-text {
font-size: 100px;
width: 100%;
position: absolute;
}
span {
display: block;
}
.big-intro-text div {
border: solid 1px green;
text-align: left;
color: gray;
max-width: 800px;
height: auto;
display: inline-block;
vertical-align: text-bottom;
}
<div class="big-intro-text" align="center">
<div><span>home<span> of the zebras</div>
</div>
Try this code.
You could add a large amount of margin on the top, and reduce the div height.
Sorry about the old answer, I did not understand the question.
I am having issues placing my dT(Date/Time) div at the bottom of it's containing div. I have tried setting bottom: 0px; to no avail. Below is the html and css code I am using.
HTML:
<div class='container'>
<aside>
<img id="user-pic" src="images/blank-user.jpg">
#User_Name
<div id="trend"><h6>TRENDING</h6></div>
</aside>
<section class="main">
</section>
</div>
CSS:
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
}
.container{
margin-top: 80px;
}
section{
margin: auto;
width: 400px;
clear: left;
top: 100px;
}
.tweet{
width: 450px;
height: 225px;
background-color: #FFFFFF;
border: 4px solid #F1433F;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-bottom: 15px;
padding: 25px 15px 0px 15px;
}
.tweetContent{
width: inherit;
height: inherit;
margin: 5px 5px 0 5px;
border-bottom: 1px solid #EEEEEE;
border-top: 1px solid #EEEEEE;
}
There is some JQuery elements within my code that I have not poseted because I do not believe it would have any effect on the positioning of a div.
It appears that the jquery aspect of the code might have something to do with it so here it is.
UPDATE: removed JQuery because it was not relevant.
Add position:relative to parent of your #dT element . Only if it is relative you can control the child elements using left , right , bottom and top.
Update:
And to the child elements for which you want to change position using left add position:absolute
P.S : Need to add relative for the div that contains #dT and absolute for #dT
#parentofdT
{
position:relative;
}
#dT
{
position:absolute
}
Easily pixed with position:absolute;: https://jsfiddle.net/1Lsnjou9/
Good luck.
You should add position: relative or position: absolute property to make the bottom: 0px work
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
position: relative;
}
use position property like position absolute or position relative so as to work with top, left,right,bottom properties
I wrote the code below and I was wondering if I could, in any way, make the white space of the body bigger. As of right now, I have the header color #444 and, I thin,k about 130px from the top and the footer is the same color and about 260px from the bottom. In the middle, I have the little tiny white space for the body. Is there any way to open that up with still keeping my header and footer the size they are — just moving the footer down? Then my next problem is that my text in my div tags, in my body will spawn behind my header and/or footer when they are in the body. Is there a way I can limit that so that they will have to spawn between my header and footer in the white space? Thanks for your help and time!
<!doctype html>
<html>
<title>Joes Nose</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<body>
<header>
<div class="zebusoft-logo">
<img src="images/logo-3.png" alt="">
</div>
</header>
<div class="body-text">
<h1>Software Devlopment Company</h1>
</div>
</body>
<footer>
<div class="about-zebu">
<p>About ZebuSoft</p>
</div>
<div class="fast-nav">
<p>Nav</p>
</div>
</footer>
</html>
html, body {
padding: 0;
margin:0;
background: #444;
}
header {
position:fixed;
top:0;
width:100%;
height:102px;
background-color:#222;
padding:20px;
}
footer {
background: #222;
width: 100%;
height: 370px;
bottom: 0;
position: fixed;
}
.zebusoft-logo {
padding: 0;
top: 0;
position: fixed;
margin-left: 400px;
}
.body-text {
font-family: "Museo Sans",sans-serif;
color: #300000;
margin-top: 150px;
text-align: center
}
.about-zebu {
font-family: "Museo Sans",sans-serif;
font-size: 20px;
color: #606060;
font-weight: 300;
padding-bottom: .1em;
margin-bottom: .8em;
margin-right: 1570px;
border-bottom: 1px solid #131313;
margin-left: 120px;
}
.fast-nav {
font-family: "Museo Sans",sans-serif;
font-size: 20px;
color: #606060;
font-weight: 300;
padding-bottom: .1em;
margin-bottom: .9em;
margin-right:;
border-bottom: 1px solid #131313;
margin-left: 390px;
}
jsFiddle
Solution
jsFiddle
Here I made the changes to your HTML, you need to nest footer into the body, I have also made changes to your CSS.
So now your footer will stick to the bottom and if there is overflow of text in the middle it will scroll.
Good luck..
old
I am not 100% sure what you have asked but here is the sample:
jsFiddle
I have added a large paragraph and everything seems to be correct.
I have changed your <div> into a section and used <p> to add text. Tell me what is wrong with the page in the link? Thanks
ADDED CSS
.about-zebu {
font-family: "Museo Sans",sans-serif;
font-size: 20px;
color: #606060;
font-weight: 300;
padding-bottom: .1em;
border-bottom: 1px solid #131313;
width: 75%;
float:left;
}
.fast-nav {
font-family: "Museo Sans",sans-serif;
font-size: 20px;
color: #606060;
font-weight: 300;
padding-bottom: .1em;
border-bottom: 1px solid #131313;
width: 25%;
float:left;
}
Hello I am trying to keep the links centered of the tan margin. How do I get it centered to the tan margin? I've tried a few things but margins won't move.
Here is the website if you want to visually see the issue:
http://codepen.io/willc86/pen/hpFLe
I am not sure why links don't want to move when I use margin-left or margin-top
css is
#header{
background-color: tan;
width: 90%;
Height: 80px;
margin: auto;
margin-bottom: 30px;
text-align: center;
}
#header a {
margin: 40px;
border: 3px solid green;
}
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin-left: 30px;
}
#mcolumn {
width: 300px; border: 1px solid red; margin: auto;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right; margin-right: 30px;
}
.clear {
clear: both;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#bx{
border: 3px solid green;
margin: auto;
width: 200px;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#margin{
margin: 30px;
}
and my html is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<div id="header">
Facebook
Google
Yahoo
</div>
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="margin">
<div id="mcolumn"><p>mcolomn</p></div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="box2">
<div id="margin">
<div id="bx">
<p> hello what is up
</div>
</div>
</div>
</body>
</html>
Add this to #header
#header {
....
line-height: 80px;
vertical-align: middle;
}
Also check the demo.
Note that this might give trouble if you want to lines of menu.
General tip : always add line-height equal to div's height to align your link in vertical middle position
line-height:80px; in #header a would do the job for you! :)
If you want to align the links vertically:
#header a {
...
line-height: 80px;
}
#header a {
border: 3px solid #008000;
display: inline-block;
margin: 0 40px;
position: relative;
top: 50%;
}
Note: the top: 50% somehow uses height and margin of parent.
You can also do it like this: create a div inside (I've called it links) which you can format away from your other div. The margins don't show because the text is inline, and you can't give inline text a top and bottom margin. Changing it to display: inline-block and position: relative allows you to change the place of the div (if you don't want to set line height). Top: 36% will centre it because this counts the margin (so you want half of 80/110 px, or 4/11 = ~36% (you can make this 50% by adding the margin to the object beneath).
HTML:
<div id="links"> Facebook
Google
Yahoo
</div>
CSS:
#header a {
border: 3px solid green;
margin-left: 40px;
margin-right: 40px;
}
#links {
display: inline-block;
position: relative;
top: 36%;
}
http://codepen.io/anon/pen/vbJkg
I have the following HTML:
<div id="main">
<div id="calendar">
<div class="column" id="time_slots">
</div>
<div class="column" id="day1">
<div class="route_container">
<div class="date"></div>
<button class="add_route" name="add_route" onclick="">Add New Route - 1</button>
<div class = "truck" id="day1_route1">
<div class="ts8-10">J Smith</div>
<div class="ts10-12">10-12 AM</div>
<div class="ts12-2">12-2 AM</div>
<div class="ts2-4">2-4 AM</div>
<div class="ts4-6">4-6 AM</div>
</div>
</div>
</div>
And the following CSS:
.label
{
width:20px;
}
.table
{
font-size: 1.2em;
}
#main
{
border-style: solid;
border-width: 1px;
border-color: black;
width:97%;
height:900px;
margin:auto;
overflow: auto;
white-space: nowrap;
}
h2
{
font-size: 24px;
}
#calendar
{
padding:1%;
}
.column
{
border-style: solid;
border-width: 1px;
border-color: black;
min-width:10%;
max-width:100%;
width:17%;
height:1000px;
display: inline-block;
overflow: auto;
padding:5px;
font-size: 0px;
}
.header
{
padding:0;
margin:0;
text-align: center;
font-style: bold;
}
.route_container
{
height:100%;
display: inline-block;
font-size: 0px;
border-style: solid;
border-width: 1px;
border-color: black;
min-width:10%;
max-width:100%;
width:100%;
overflow: auto;
padding:5px;
font-size: 0px;
}
.truck
{
width:275px;
height:100%;
border-style: solid;
border-width: 1px;
border-color: black;
display:inline-block;
margin:auto;
font-size: 16px;
padding:2%;
position: relative;
}
.column#time_slots
{
width:5%;
min-width:5%;
max-width: 10%;
}
.date
{
text-align: center;
width:100%;
border-style: solid;
border-width: 1px;
border-color: black;
}
.column button
{
display:block;
width:100%;
width:100%;
border-style: solid;
border-width: 1px;
border-color: black;
font-size: 16px;
}
.full_time
{
display: none;
}
.ts8-10, .ts10-12, .ts12-2, .ts2-4, .ts4-6
{
border-style: solid;
border-width: 1px;
border-color: black;
width:90%;
height:20%;
font-size: 28px;
text-align: center;
padding:5px;
}
I am adding another div with the following Javascript:
$(".add_route").click(function(){
var truck = $(this).parent().find('.truck').length
truck += 1;
var w = $(this).parent().width();
$(this).parent().animate({width:(w+405)}, 1000);
$(this).parent().parent().animate({width:(w+425)}, 1000);
$(this).parent().append('<div class = "truck" id="'+$(this).parent().parent().attr('id')+'_route'+truck+'"><p>There are '+ truck +' routes</p></div>');
$('#'+$(this).parent().attr('id')+'_route'+truck).hide();
var route_num = $(this).parent().find('.truck').length;
var route_w = (100/route_num)-1;
$('#'+$(this).parent().attr('id')+'_route'+truck).fadeIn(200);
$(this).parent().parent().css("padding", "5px");
console.log($(this).parent().parent().css("padding", "5px"))
$(this).parent().find('.truck').css("margin-right", "3px");
});
And I get the following result:
As you can see, the added div (the one with "there are 2 routes"), is quite a bit lower than the other div. To make matters worse, when I change the contents of this HTML by expanding the divs (ts8-10, etc) and a border:
<div class = "truck" id="day1_route1">
<div class="ts8-10">J Smith</div>
<div class="ts10-12">10-12 AM</div>
<div class="ts12-2">12-2 AM</div>
<div class="ts2-4">2-4 AM</div>
<div class="ts4-6">4-6 AM</div>
</div>
The offset is so much worse. It is practically at the bottom of the first div (the one with JSmith).
I understand this these are set as "inline-block" and I have tried to make adjustments, as you can see, and nothing seems to work. I have checked to make sure that there are no extra margins or padding issues, at least none are showing when I use the Chrome web dev tool.
Can someone tell me what is going on here? What am I doing wrong? How can I fix this?
inline-block items are aligned based on the vertical-align property, which defaults to baseline. Add vertical-align:top; to .truck.
(This is a more flexible, intuitive solution than using a table-cell hack. inline-block will still behave as you expect it to after that.)
In css change the display :inline-block to table-cell, It will work
.truck
{
width:275px;
height:100%;
border-style: solid;
border-width: 1px;
border-color: black;
/*display: inline-block;*/
display: table-cell;
margin:auto;
font-size: 16px;
padding:2%;
position: relative;
}