In my project here, I am not able to vertically center align the floated undo/redo elements on the top bar.
I tried vertical-align: middle also played with the line-height but I did not get the desired effect.
What am I missing?
jsFiddle
One solution is to use display: table and display: table-cell in place of the float and then use vertical-align: middle;
Have a fiddle!
#bar has display: table
h4 and #actions are treated as "table cells"
HTML
<div id="bar">
<h4>Tasks</h4>
<span id="actions">
<input type="image" id="undo" src="http://i.imgur.com/fyCSlvW.png" disabled />
<input type="image" id="redo" src="http://i.imgur.com/BshzaCg.png" disabled />
</span>
</div>
CSS
* {
margin: 0;
padding: 0;
}
body {
font-family:"Arial";
font-size: 62.5%;
}
#actions button {
background: none;
border: 0rem;
}
#actions button input {
outline: none;
}
#bar {
background-color: #4196C2;
display: table;
width: 100%;
}
h4 {
text-decoration: none;
display: table-cell;
vertical-align: middle;
margin-top: 2rem;
/* = 20px */
color: white;
padding: 20px;
font-size: 1.8rem;
}
#actions {
display: table-cell;
vertical-align: middle;
text-align: right;
}
You have not styled the span which contains the two buttons.
Add the following:
#actions {
display: block;
margin: 0 0 0 0;
padding: 15px 0 0 0
}
Here you go: http://jsfiddle.net/csTS7/151/
Add in the div a margin-top and do it with percent for example
#bar
{
margin-top: 5%;
}
Here's the JsFiddle
h4{
text-decoration: none;
display: inline-block;
/* margin-top: 2rem; = 20px */
color: white;
margin-left: 1.5rem;
font-size: 1.8rem;
line-height: 15px;
}
I have given the element bar a minimum height and removed margin top for h4 and added line-height
Related
I'm trying to do a tab header, its a list of the titles, sometimes the titles are too long and has "-" in between. So to save space I add br to breakline.
1/The problem is the distance up & down between the "-" symbols is too big, is there any way I can fix that?
is this a correct way to do it by set br tag or should I set max-width for each li for the breakline?
This is my codepen
<div>
<ul>
<li>Real Estate, <br> Building House</li>
<li>Distribution <br>–<br> Manufacturing</li>
<li>Media <br>–<br> Broadway theater</li>
<li>Singer <br>–<br> dancer</li>
<li>Real Estate</li>
<li>Construction</li>
</ul>
div {width: 80%; margin: 0 auto;}
ul {
list-style: none;
/* display: table; */
width: 100%;
padding: 0;
margin: 0;
}
ul li {
position: relative;
font-size: 1.4rem;
/* display: table-cell; */
color: blue;
text-align: center;
display: inline-block;
margin-right: 20px;
}
Hope this helps you:
ul li {
font-size: 1.4rem;
color: red;
max-width: 120px;
padding: 10px;
vertical-align: middle;
text-align: center;
/* padding: 0 5px; */
display: inline-block;
margin-right: 14px;
}
Updated codepen
I got a problem with h1 and p element inside a couple of inline-blocked divs.
Here's the code:
#map-canvas {
width: 69%;
height: 1000px;
display: inline-block;
}
#filter-manager{
display: inline-block;
width: 30%;
height: 1000px;
background-color: #000000;
margin: 0;
padding: 0;
}
#filter-manager h1{
font-size: 20px;
text-transform: uppercase;
color: #fff;
margin: 0;
padding: 0;
display: block;
}
<div id="filter-manager">
<h1>Filtri</h1>
</div><!-- #filter-manager -->
<div id="map-canvas"></div><!-- #map-canvas -->
The divs keep their inline status but #filter-manager goes on the bottom when I put a h1 or p element. If I don't put anything inside the divs are aligned perfectly.
Why h1 and p elements do behave like that?
In this case you have 2 solutions. First is to add this:
#filter-manager {
float: left;
}
Second is to make h1 table :
#filter-manager h1 {
display: table;
}
You should add vertical-align:top in the div with display:inline-block; Also , you dont need display:block in h1 because is by default in h1,h2,h3 etc..
#map-canvas {
width: 69%;
height: 100px;
display: inline-block;
background-color:red;
vertical-align:top
}
#filter-manager{
display: inline-block;
width: 30%;
height: 100px;
background-color: #000000;
margin: 0;
padding: 0;
vertical-align:top
}
#filter-manager h1{
font-size: 20px;
text-transform: uppercase;
color: #fff;
margin: 0;
padding: 0;
display:block
}
<div id="filter-manager">
<h1>Filtri</h1>
</div><!-- #filter-manager -->
<div id="map-canvas"></div><!-- #map-canvas -->
Try changing the display of the h1 in the css file.
If that does not work try and check the width:30% and margin:0 parameters your problem is definitely in there.
I have this page: food menu
I have placed a clear on the dish title with the following css:
#media (max-width: 768px) {
.dish: {text-align:center;}
.dishTitle {
clear: right;
display: block;
}
.dish img {clear: left;}
}
For some reason it is not clearing. If you inspect the dishTitle div it shows up and if I remove the display attribute it does clear. How can I get the images and price to be centered on a separate line below the dishNumber and dishTitle divs? Also, I have the entire dish item wrapped in the .dish div and have set it to text-align: center; but nothing is centering. I want it to look right on mobile devices and right now it just bunches everything together. Here is all of my CSS if it helps:
.dish {
text-align: left;
}
.dishNumber {
font-size: 18px;
display: inline;
line-height: 24px;
vertical-align: middle;
color: #FF6600;
margin-right: 2px;
}
.dishTitle {
font-size: 18px;
display: inline;
line-height: 24px;
vertical-align: middle;
color: #000066;
margin-bottom: 4px;
}
.dishPhoto {
padding-right: 8px;
padding-left: 8px;
display: inline;
}
.dishPrice {
font-size: 18px;
clear: right;
display: inline;
float: right;
line-height: 32px;
vertical-align: middle;
color: #000066;
}
.dishDescription {
font-size: 14px;
margin-bottom: 6px;
font-style: italic;
padding-right: 44px;
}
.dish img {
max-height: 22px;
}
Thanks for any help.
The div (#second) is spilling beyond its li container for height: 2em; Only way I can see it happen is due to some mysterious padding within the li. But why ? Using reset.css (say, by Eric Meyer) doesn't seem to make any difference either. Please help. (For height: 1em, there is no problem.)
Here is http://jsfiddle.net/d84e5/
CSS:
li {
display: inline-block;
padding: 0 .5em;
border: 1px solid #ccc;
line-height: 3em;
}
#second {
display: inline-block;
background-color: #000;
width: 50px;
height: 2em;
}
HTML:
<ul>
<li>first</li><!--
--><li><div id="second"></div></li><!--
--><li>third</li><!--
--><li>fourth</li><!--
--><li>fifth</li>
</ul>
This is because when you use display: inline-block your baseline will be in the middle. You can align the element in the middle of the baseline with:
vertical-align: middle;
jsFiddle
Adding vertical-align:top; solves the issue (or use middle if you want to align the div in the vertical center).
jsfiddle
li {
display: inline-block;
padding: 0 .5em;
border: 1px solid #ccc;
line-height: 3em;
}
#second {
display: inline-block;
background-color: #000;
width: 50px;
height: 2em;
vertical-align: top;
}
The content starts from the middle of the li, as the div is taller than the li it pushes the top of the li.
Fix:
li {
display: inline-block;
padding: 0 .5em;
border: 1px solid #ccc;
line-height: 3em;
}
#second {
display: inline-block;
background-color: #000;
width: 50px;
height: 1.85em;
}
It's basing itself off of the line-height.. not padding or margin. Lower the height to 1.8em or bring down the line-height of the li.
I have a series of buttons that I need to have text and a chevron with a different class.
The text and the chevron both need to be centered vertically and horizontally within the container and be able to expand and contract based on the number of the characters.
Additionally I need the chevron to always be flush against the text with a 10px left padding.
I'm having difficulty centering the text and arrow.
Thanks for your help!
section {
margin:2px;
}
.cta {
background-color: #8dc63f;
color: #fff;
font-size: 40px;
margin: 0 auto;
padding: 40px;
text-transform: uppercase;
width: 300px;
text-align: center;
}
.cta-text{
float:left;
text-align: center;
}
.arrow-lm{
float: left;
font-size: 40px;
margin-top: 10px;
padding-left: 10px;
position: relative;
top: -11px;
}
Here's the fiddle
http://jsfiddle.net/ebjrc/1/
Not sure if this is what you mean, but I would use the flexible box model.
section {
margin:2px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.cta {
background-color: #8dc63f;
color: #fff;
font-size: 40px;
margin: 0 auto;
padding: 40px;
text-transform: uppercase;
width: 300px;
}
.cta, .cta-text{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.arrow-lm{
font-size: 40px;
margin-top: 10px;
padding-left: 10px;
position: relative;
}
Let me know if this is what you need.
-- EDIT
jsFiddle here
Cheers!
I think your approach is much more complicaded as needed, if i understanded you correctly.
Remember that every anchor element can also have a layout. Why would you place a anchor and give a div inside it propties of layout when the anchor itself could have those propeties. This way you can use less elements in your code.
<div class="campaign-1">
<a href="#" class="submit">
Tune In
<span> > </span>
</a>
</div>
You can give you span a additional class if you need to edit it somewhere in your code, which i'm not aware of.
Now also this reduces your css code:
div {
background-color: #8dc63f;
color: #fff;
font-size: 40px;
margin: 0 auto;
padding: 40px;
text-transform: uppercase;
width: 300px;
text-align: center;
margin: .5em;
}
div a
{
color: white;
}
That's actually all you need.
jsFiddle