I am trying to set text at a center of a box when a number is not present, and when number is present text should go to top and number at the bottom.
I am able to show with number box correctly but without number box is vertical alignment does not work.
I am an HTML new bee.
Can someone help me here? I have looked at various articles and they point to using table cell and vertical alignment as middle. I tried that as well, I think the red box does not have text in the middle.
Here is an example.
http://jsfiddle.net/seohh5r1/2/
<!DOCTYPE html>
<html>
<head>
<style>
.alignleft {
float: left;
}
.alignright {
float: right;
}
.even-boxes,
.odd-boxes {
height : 52px;
width : 430px;
padding-left : 20px;
display : table-cell;
vertical-align : middle;
}
.odd-boxes {
background-color:#FFCCCC;
}
.even-boxes {
background-color:#CCEBFF;
}
.surname-entry {
font-size: 25px;
font-family:"Verdana";
}
.name-entry {
font-size: 18px;
font-family:"Verdana";
}
.another-entry {
font-size: 14px;
font-family:"Verdana";
}
.number-entry {
font-size: 32px;
font-family:"Verdana";
}
</style>
</head>
<body>
<div class="odd-boxes">
<div>
<span class="surname-entry">ABCDEFGH<span>,</span></span>
<span class="name-entry"> PQRSTU</span>
<span class="number-entry alignright" style="margin-right:20px">K</span>
</div>
</div>
<div class="even-boxes">
<div>
<span class="surname-entry">ABCDEFGH<span>,</span></span>
<span class="name-entry"> PQRSTU</span>
<span class="number-entry alignright" style="margin-right:20px">K</span>
<div class="another-entry">[1234567890101]</div>
</div>
</div>
</body>
</html>
And here is another way to align text vertically, this solution will work for a single line and multiple lines of text, but still requires a fixed height container:
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
The CSS just sizes the <div>, then vertically center aligns the <span> by setting the <div>'s line-height equal to its height, and making the <span> an inline-block with vertical-align: center. Then it sets the line-height back to normal for the <span> so its contents will flow naturally inside the block.
div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
Demo Link
http://jsfiddle.net/CtH9k/
I misunderstood you earlier, try this again. If you are trying to vertically align elements
The span element must be moved out of the parent div hierarchy
<div>
<span class="surname-entry">ABCDEFGH<span>,</span></span>
<span class="name-entry"> PQRSTU</span>
<div class="another-entry">[1234567890101]</div>
</div>
<span class="number-entry">K</span>
You need to add in additional css, the crucial one is display:inline-block to vertically align your inner elements
.odd-boxes, .even-boxes{
position:relative;
}
.odd-boxes>span, .even-boxes>span{
position:absolute;
right:20px;
top:0;
bottom:0;
margin:auto;
vertical-align:middle;
height:39px;/*height need to be specified*/
}
Also I've modified some of your css, you can refer to my version below:
http://codepen.io/vincentccw/pen/vOJVbX
Related
Why does Vertical-align not work on the element I am trying to align? But works if I align other elements around it?
I have read few articles on vertical align, which state that it was created to align tables or inline elements.
Hence I set all my elements as inline-block, in the code.
When I try to vertical-align the menu links, it does relatively nothing.
If I try to align 1 box to the left or right of menu links it will push down the menu.
But if I vertical-align both boxes at once, the text gets aligned.
What does this happen, how am I supposed to use vertical-align, or am I not supposed to use it anymore?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FlexPractice</title>
<link rel="stylesheet" href="practiceflex.css">
</head>
<body>
<nav class="container">
<div class="logo">
<div class="box" id="box1"> </div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Our mission</li>
<li>Services</li>
<li>About Us</li>
<li>Leave a comment</li>
</ul>
</div>
<div class="profilepic">
<div class="box" id="box2"> </div>
</div>
</nav>
</body>
</html>
html,body{
padding:0px;
margin:0px;
}
.box{
width: 48px;
height:50px;
background: red;
}
.menu > ul > li{
text-decoration: none;
display:inline;
margin-right:20px;
}
.container
{
display:inline-block;
/* vertical-align: middle;*/
}
.container * {
display:inline-block;
/* vertical-align: middle;*/
}
/*
#box1{
vertical-align: middle;
}
#box2{
vertical-align: middle;
}*/
https://jsfiddle.net/curiousproger/gurmL8f9/
Refer to MDN docs vertical-align. One use case is indeed for table-cells, the other is, as stated on MDN:
To vertically align an inline element's box inside its containing line box (emphasis mine)
This means 2 things:
vertical-align will only affect elements with display: inline or display: inline-block
the line-height property of the parent, and of any children may greatly influence the resulting alignments of all elements involved.
With extra levels of nesting, line-height being important for text alignment and line breaks, vertical-align is best used for inline content like paragraph text, images, icons, footnote references etc. For vertically centering block-level elements (like a navigation) it is much safer to use display: flex; align-items: center; on the parent
For illustration purposes of potential problems I included some test cases below.
[id^="case"] { border: 1px solid; height: 50px; }
code { display: inline-block; }
.box {
display: inline-block;
width: 32px;
height: 32px;
background: red;
vertical-align: middle;
}
#case-2, #case-3 {
line-height: 50px;
}
#case-3 code {
line-height: 100px;
vertical-align: middle;
}
#case-3 .box {
line-height: 20px;
vertical-align: middle;
}
<h2>vertical-align tests</h2>
<div id="case-1">
<span class="box"></span>
<code>#case-1</code>
<span class="box"></span>
</div>
<div id="case-2">
<span class="box"></span>
<code>#case-2</code>
<span class="box"></span>
</div>
<div id="case-3" style="line-height: 0;">
<span class="box"></span>
<code>#case-3</code>
<span class="box"></span>
</div>
<h2>Flexbox</h2>
<div id="case-4" style="display: flex; align-items: center;">
<span class="box"></span>
<code>#case-3</code>
<span class="box"></span>
</div>
The vertical alignment default setting (i.e. if you don't define anything else) is baseline, which is the baseline of the last line of text inside an element. If there is no text, it's the bottom border instead.
In this variation of your fiddle the first box (no text) is aligned to the baseline of the text elements by its bottom border, in the other box (containing text now) the last text line is aligned to the other text elements:
https://jsfiddle.net/x3q0v5ab/
Note: I didn't change the CSS, i only put some text into the second block.
So if you use a vertical-align setting other than baseline, use the same on both blocks.
I have something like the following:
<div id="wrapper">
<span id="small">I want to be vertically centered!!!</span>
<span id="big">BIG</span>
</div>
Here's the jsfiddle:
https://jsfiddle.net/gjf1neeq/2/
How can I vertically center the first span?
I suggest both vertical-align: middle as well as setting a line-height.
While the line-height isn't strictly needed, it is a useful means to determine the height over which you'd like the text to be centered. For example, if you knew you wanted the height of the space to be 100px, you could set the line-height: 100px;, and it would occupy 100px, and both lines of text would be centered in that space.
span#small,
span#big {
display: inline-block;
vertical-align: middle;
line-height: 3em;
}
Working Fiddle
Giving the spans display:inline-block; vertical-align:middle; will vertically center them with respect to each other.
span {display:inline-block; vertical-align:middle;}
span#big {font-size: 200%;}
<div id="wrapper">
<span id="small">I want to be vertically centered!!!</span>
<span id="big">BIG</span>
</div>
You can do it with flexbox:
#wrapper {
display: flex;
align-items: center;
}
#big {
font-size: 200%;
}
https://jsfiddle.net/686rusgn/1/
I am trying to align two different divs next to each other using inline-block, but they are instead stacking like a blocked element. Specifically, they are the wrapper_image div containing an image, and the about_div containing some text information.
I have the following HTML:
<body>
<header>
... header information here
</header>
<div class="wrapper_image">
<img src="img/1935323_10153090821883239_4407778661294134622_n.jpg" class="profile-photo">
</div>
<div class="about_div">
<h3 id="about_me">About Me</h3>
<p id="about_me_info">
Text
</p>
<p id="about_me_info">
Some more text
</p>
</div>
<footer>
<p>
© Name
</p>
</footer>
</body>
And CSS:
.wrapper_image {
display: inline-block;
vertical-align: top;
}
.about_div {
display: inline-block;
vertical-align: top;
}
.profile-photo {
max-width: 350px;
border-radius: 100%; /* adds rounded corners to an element */
}
#about_me {
font-size: 2em;
}
#about_me_info {
font-size: 1.5em;
}
everything seems oks.
I put a demo picture and display in chrome and this is what looks like
The image and the text are inline-block and seems ok
Im trying to place some text at the left of an image. Inline-block doesnt suffice because if the string is long enough, it just pushed the image downwards.
The goal is to have a container with a fixed width, which contains the image at the right and text filling the left, which wraps if long enough, while being vertically aligned to the bottom.
I have an initial example using floats:
.container {
width: 200px;
}
.container img {
width: 60px;
height: 60px;
float: right;
}
.container h1 {
font-size: 15px;
}
<div class="container">
<img src="//placehold.it/60x60"/>
<h1>Text Text Text Text Text</h1>
</div>
The problem with this is that the text is vertically aligned to the top. I want it to be aligned to the bottom. I've tried everything and i just cant make it work. Any ideas?
jsFiddle demo
invert the order of your children elements and try this CSS (that emulates the use of Table elements)
.container{
display:table;
width: 200px;
}
.container > *{ /* target immediate children */
display:table-cell;
vertical-align:bottom;
}
.container img {
width: 60px;
height: 60px;
}
.container h1 {
font-size: 15px;
}
<div class="container">
<h1>Text Text Text Text Text</h1>
<img src="//placehold.it/60x60" />
</div>
P.S: SEO (Search-Engine-Optimization) -wise it's not the best idea to have more that one <h1> inside a page. Use h1 wisely ;)
I have an element that's 60px tall that has other elements like an image and a couple of spans inside of it and I'm having trouble getting them to align vertically inside the 60px high element. Here's the mockup and CSS:
<div class="member">
<img src="images/pic.png" alt="John Smiths's Profile Picture" class="pic">
<span class="name">John Smith</span>
<span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>
#sidebar .member {
height: 60px;
margin-bottom: 10px;
vertical-align: center;
}
#sidebar .member .name {
font-size: 15px;
font-weight: bold;
}
#sidebar .member .pic {
width: 50px;
height: 50px;
border-radius: 50%;
float: left;
margin-right: 10px;
}
#sidebar .member .skills {
display: block;
font-size: 12px;
overflow: hidden;
}
I've put it up on jsfiddle: http://jsfiddle.net/CYFyx/2/
As you can see, the elements within the .member element push to the top. I need them vertically aligned like so:
Already tried vertical-align: middle; but with no luck.
You can use vertical-align: middle in td table layout only. So you have to add a div around the spans
<div class="cell">
<span class="name">John Smith</span>
<span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>
with this properties
#sidebar .member .cell {
display: table-cell;
vertical-align: middle;
height: 50px;
}
You can test it here: http://jsfiddle.net/Tn2RU/
Try putting them all in a div that you can vertically align using
position:relative;
margin-top: auto;
margin-bottom: auto;
height: XXpx;
You need to set the width of a parent element and width of your children so they must go into next line.
The other posibility would be to set your parent element to position:relative and then use position:absolute on all children and simply, precisely position them with top:20px; , then next one top:40px; etc etc.
With this second solution you can get exact pixel positioning of all children elements.
That shall positively give you best results.
You could also put them into a div and add padding to the top.
HTML
<div id="block">
<span class="name">John Smith</span>
<span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>
CSS
#block {
padding-top:5px;
}
jsFiddle