I am pretty new to CSS display, currently I want to center align some text and icon(vertically), but it just not works:
.header {
display: inline-block;
height: 30px;
width: 200px;
background-color: #1f78b4;
}
.holder {
width:auto;
height: 30px;
background-color: lightblue;
float:right;
line-height: 30px;
}
.menuitem {
display: inline-block;
line-height: 30px;
}
.source {
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>TEST COSMOS ICONS</title>
<link href="https://file.myfontastic.com/qRRrqNRQJ2GCtUGjRFh7DM/icons.css" rel="stylesheet">
</head>
<body>
<div class="header">
<span class="holder">
<span class="menuitem source">Perf</span>
<span class="menuitem icon-gear"></span>
<span class="menuitem icon-download"></span>
</span>
</div>
</body>
</html>
I thought a line 100% line height can control the text and inline-block elements vertically align center, but if you pay a specify attention to those icon, they are a little above the center.
"Why inline-block can not be vertically aligned?"
The point of in-line is to have elements be propagated to the screen from left-to-right; so, horizontally.
If you want it vertically, don't use elements styled with in-line because the elements naturally propagate from top to bottom; so, vertically.
vertical-align:middle seems to be what you are after but you need to apply it to the pseudo-elements too.
.header {
display: inline-block;
height: 30px;
width: 200px;
background-color: #1f78b4;
}
.holder {
width: auto;
height: 30px;
background-color: lightblue;
float: right;
line-height: 30px;
}
.menuitem,
.menuitem::before {
display: inline-block;
vertical-align: middle;
}
.source {
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>TEST COSMOS ICONS</title>
<link href="https://file.myfontastic.com/qRRrqNRQJ2GCtUGjRFh7DM/icons.css" rel="stylesheet">
</head>
<body>
<div class="header">
<span class="holder">
<span class="menuitem source">Perf</span>
<span class="menuitem icon-gear"></span>
<span class="menuitem icon-download"></span>
</span>
</div>
</body>
</html>
Related
What I need is as:
1. the line height between blue lines is 5px.
2. the line height between blue, black and brown line is 20 px.
Please see the code I have tried. I couldn't figure out what's wrong.
<!DOCTYPE html>
<html>
<head>
<style>
.divClass{
overflow-y: auto;
width: 100%;
height:100%;
line-height: 20px;
}
.divclass span{
line-height: 5px;
}
</style>
</head>
<body>
<div class="divClass">
<span style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span><br>
<span>second efgh</span><br>
<span style="color:brown;">third hijklmnopqrstuvwxyz</span>
</div>
</body>
</html>
Please help thanks in advance.
<!DOCTYPE html>
<html>
<head>
<style>
.divClass{
overflow-y: auto;
width: 100%;
height:100%;
line-height: 20px;
}
.span-blue{
line-height: 5px !important;
}
.span-other{
line-height: 20px !important;
}
</style>
</head>
<body>
<div class="divClass">
<span style="color:blue;" class="span-blue">first
abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz
abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span><br>
<span class="span-other">second efgh</span><br>
<span style="color:brown;" class="span-other">third
hijklmnopqrstuvwxyz</span>
</div>
</body>
</html>
Here you go:
HTML:
<style>
.divClass{
overflow-y: auto;
width: 100%;
height:100%;
line-height: 20px;
}
#blue{
line-height: 5px;
}
</style>
</head>
<body>
<div class="divClass">
<div id="blue" style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz <br>abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</div><br>
<span>second efgh</span><br>
<span style="color:brown;">third hijklmnopqrstuvwxyz</span>
</div>
</body>
</html>
Hopefully this is what you need. Inspect the elements to check if it is proper line height.
Thank you Yuri fro guiding me. Your answer helped me solve the issue. Still, I would like to post my resolved code with minimal changes. Please find the corrected code below. Thanks all.
Corrections done: Replaced span with div and added margin-bottom instead of line-height with new values.
<!DOCTYPE html>
<html>
<head>
<style>
.divClass{
overflow-y: auto;
width: 100%;
height:100%;
line-height: 20px;
}
.divclass div {
margin-bottom: 100px;
}
</style>
</head>
<body>
<div class="divClass">
<div style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</div><br>
<div>second efgh</div><br>
<div style="color:brown;">third hijklmnopqrstuvwxyz</div>
</div>
</body>
</html>
Having line-height: 5px will make your text overlap, so I guess you want each line 5px far from each other. To do so, you need to make line-height 5px greater than font-size. The "line height between blue black and brown" is called margin (you can also use padding) and in order to work ,you have to set display: block to span tags
.divClass{
width: 100%;
height: auto;
font-size: 15px;
}
span { display: block; }
.blue{
color: blue;
line-height: 20px;
}
.brown { color: brown; }
.black, .brown, .blue {margin: 10px 0;}
<div class="divClass">
<span class="blue">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span>
<span class="black">second efgh</span>
<span class="brown">third hijklmnopqrstuvwxyz</span>
</div>
You have applied line-height: 5px; to .divclass span
You have to specify for which span you want this particular CSS
when there are multiple spans available in this div.
For this, you can use span:first-child or add class to that particular span.
I have used span:first-child here.
span:first-child{
line-height: 5px;
}
span{
overflow-y: auto;
width: 100%;
height:100%;
line-height: 20px;
}
<div class="divClass">
<span style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span><br>
<span>second efgh</span><br>
<span style="color:brown;">third hijklmnopqrstuvwxyz</span>
</div>
Hope this helps :)
Scenario: I need a container with relative positioning, which has 2 absolute positioned children. On clicking the container both children will be transitioned on transform property, one being moved to the left and one being moved to the right, both outside the window, so I need somehow to set overflow: hidden on the parent, in order not to show the transitioned elements outside of parent container.
The thing is parent does not have a height set because of the absolute children, and when I use overflow-x: hidden on it, nothing is showed anymore.
Is it possible to set an overflow so that when children gets transformed to left/right no scrollbar will be showed? I do not want to set overflow on the body element. I'm looking for CSS-only solutions, if there are any.
Also setting a fixed height for parent is not a solution to my problem, please take that into consideration.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>FullScreen-Split | Experimental</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="box-container">
<div class="box clearfix">
<div class="half-left">
<div class="split">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
<div class="half-right">
<div class="split">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
And here is my SASS code
.box {
width: 100%;
position: relative;
&.active {
.half-left {
transform: translateX(-150%);
}
.half-right {
transform: translateX(150%);
}
}
.half-left,
.half-right {
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
position: absolute;
overflow: hidden;
color: #fff;
}
.half-left {
top: 0;
left: 0;
> .split {
width: 200%;
}
}
.half-right {
top: 0;
left: 50%;
> .split {
margin-left: -50%;
}
}
.split {
width: 100%;
height: 100%;
}
.details {
text-align: center;
> i.fa {
font-size: 62px;
margin-bottom: 40px;
}
> h3 {
font-size: 32px;
font-weight: bold;
}
}
}
.clearfix {
clear: both;
&::before,
&::after {
content: '';
display: table;
clear: both;
}
}
html and body elements are set to width: 100% and `height: 100%;
I suggest to not use position: absolute or float, as neither is meant for general layout.
They both take their element out flow (in somewhat different ways though), and make it more difficult to create a responsive page.
You could simplify the code a little and use display: inline-block, like this
.box {
width: 100%;
}
.box .half {
display: inline-block;
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
overflow: hidden;
color: #fff;
}
.box .details {
text-align: center;
}
.box .details > i.fa {
font-size: 62px;
margin-bottom: 40px;
}
.box .details > h3 {
font-size: 32px;
font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="box-container">
<div class="box">
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div><!-- this comment remove the white space between the inline-block elements
--><div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
Or use flexbox, which today is the recommended way to do layout
.box {
width: 100%;
display: flex;
}
.box .half {
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
overflow: hidden;
color: #fff;
}
.box .details {
text-align: center;
}
.box .details > i.fa {
font-size: 62px;
margin-bottom: 40px;
}
.box .details > h3 {
font-size: 32px;
font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="box-container">
<div class="box">
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
Inside of positioning half-left and half-right as absolute, you could just float them both left and add overflow: hidden to the parent container.
.half-left, half-right {
float: left;
}
.box {
position: relaitve;
overflow: hidden;
}
Then when you add active to the parent container, the two children should transform as you intended.
Here's a Codepen to demonstrate : - https://codepen.io/aphextwix/pen/KmmgXJ
I know this is a common question but I'm sure I'm just missing something obvious here. I'm trying to get the fontawesome icon to vertically align in the middle of the parent div, but it just keeps sitting at the top.
function spinner() {
$("#spinner").show();
}
#spinner {
display: none;
height: 100%;
left: 0px;
position: absolute;
text-align: center;
top: 0px;
width: 100%;
z-index: 99999;
}
#spinner div {
color: yellow;
border: 10px solid red;
height: 100%;
vertical-align: middle;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
</head>
<body>
<div id="spinner">
<div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
</div>
<button type="button" onclick="spinner()">
Spinner
</button>
</body>
</html>
I'll refer you to here, which explains 1) your common question and 2) how to actually vertically align.
Summary: vertical align doesn't work the way you think it does, and you have to use other methods (easily found online) to vertically align.
You can also look into using flex-box or hacks already posted on SO.
Because the div is hidden using display:none the property needs to be changed to display:table and then the child div should have the property display:table-cell.
function spinner() {
$("#spinner").css("display", "table");
$("#spinner").show();
}
#spinner {
display: none;
height: 100%;
left: 0px;
position: absolute;
text-align: center;
top: 0px;
width: 100%;
z-index: 99999;
}
#spinner div {
border: 10px solid red;
color: yellow;
display: table-cell;
height: 100%;
vertical-align: middle;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
</head>
<body>
<div id="spinner">
<div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
</div>
<button type="button" onclick="spinner()">
Spinner
</button>
</body>
</html>
There is two common techniques that I know of.
Use the table method below.
Sometimes making your element to display as table creates a headache in responsive website and in that case you can use the transform:translate technique.
#spinner div {
position: relative;
}
#spinner .fa-spinner{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
function spinner() {
$("#spinner").show();
}
#spinner {
display: none;
height: 100%;
left: 0px;
position: absolute;
text-align: center;
top: 0px;
width: 100%;
z-index: 99999;
}
#spinner div {
color: yellow;
border: 10px solid red;
height: 100%;
vertical-align: middle;
display: table;
width: 100%;
}
#spinner .fa-spinner{
display: table-cell;
vertical-align: middle;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
</head>
<body>
<div id="spinner">
<div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
</div>
<button type="button" onclick="spinner()">
Spinner
</button>
</body>
</html>
How can I horizontally and vertically center text above font awesome icon?
Example code:
<div>
<i class="icon-circle"></i>
<span>text</span>
</div>
Just set display:table-cell, vertical-align: middle and text-align: center to the div
CSS
div{
display: table-cell;
text-align:center;
vertical-align: middle;
}
p {
<!-- set the paragraph position as absolute -->
vertical-align: bottom;
display: inline-block;
position: absolute;
}
i {
<!-- set the image position relatively -->
vertical-align: top;
margin-top: 6%;
margin-left: 0.7%;
position: relative;
}
<head>
<!--let's assume u chose the fa-camera-retro icon-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div id="icon_labeled">`
<p>Truc</p>
<i class="fa fa-camera-retro"></i>
</div>
</body>
Is this what you're trying to achieve?
HTML:
<div>
<div class="content">
<span>text</span>
<i class="fa fa-camera-retro"></i>
</div>
</div>
CSS:
div{
width: 200px;
height: 80px;
background-color: #ddd;
text-align: center;
display: table;
}
div .content {
display: table-cell;
vertical-align: middle;
}
div .content span {
display: block;
}
http://jsfiddle.net/63ovh9xk/
Using Bootstrap 2.3 I achieved it like this:
<span class="icon-stack" style="text-align:center;">
<i class="icon-circle icon-2x"></i>
<span class="icon-stack"><strong>Some text</strong></span>
</span>
i am trying to center my horizontal <ul> inside a <div> (the yellow stripe in my example). the markup is below. i know that if <li> were not floated then i could do it by setting left and right margins on <ul> to "auto", but i do not seem to find a way to get rid of "float" because i need my <li> be block elements so that i could size them. please help!
thanks
konstantin
<html>
<head>
<title></title>
<style type="text/css">
.container
{
background-color: yellow;
}
.container li
{
border: solid 1px grey;
display: block;
float: left;
height: 100px;
line-height: 100px;
list-style-type: none;
margin: 5px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>x</li>
<li><div>y</div></li>
</ul>
<div style="clear: both;">
</div>
</div>
</body>
</html>
Demo posted, on OP's behalf, at: jsbin.
is a block level element, and so takes up the entire width of container... also text-align is for aligning text. You could do something like:
.container ul{
width:400px;
margin:0px auto
}
Try this, works on firefox and chrome
<html>
<head>
<title></title>
<style type="text/css">
.container
{
background-color: yellow;
text-align: center;
}
.container ul
{
display: inline-table;
text-align: center;
}
.container li
{
border: solid 1px grey;
display: block;
float: left;
height: 100px;
line-height: 100px;
list-style-type: none;
margin: 5px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>x</li>
<li>
<div>
y</div>
</li>
</ul>
<div style="clear: both;">
</div>
</div>
</body>
</html>
Not sure how to answer your question because I can't even see the yellow stripe in FF 3.6.8
but have a look at this http://www.cssplay.co.uk/boxes/ - there are many options and it might help you out.