I added center-vertically to <div class="col-lg-6 col-lg-offset-3"> in the services section but this doesn't seem to work. I tried a couple of other things as well but to no success.
center-vertically contains:
display: table-cell;
text-align: center;
vertical-align: middle;
Check out the live version here (just go to the services section to check out the tabs) if you inspect element on the column the tabs are in you will see a little bit of extra space on the right.
parent should have:
parent {
display: table;
}
child:
child {
display: table-cell;
vertical-align: middle;
margin: 0 auto; // if you want horizontal centering too
}
UPDATE
To horizontally center your UL inside of the column:
<ul class="nav nav-tabs" style="display: inline-block;margin: 0 auto;">
Your UL has full width. display: inline-block will trim it and margin: 0 auto will center it inside the parent.
Related
Hi I'm currently trying to float my icon element to the right, while maintaining how its centered vertically next to its sibling element. I know float and display: inline-block can't coexist with each other. I've already tried using direction: rtl and text-align: right for my icon. I also don't want to hardcode by using pixels with margins/paddings, since I want this to be mobile-responsive. Are there any ideas?
Here's what the HTML would look like:
<span class='container'>
<p class='text'>Here is a lot of text and it is meant to overflow.</p>
<icon class='caret'></icon>
</span>
Here's my current CSS:
.text{
width: 340px;
display: inline-block;
vertical-align: middle;
}
.caret{
color: gray;
display: inline-block;
vertical-align: middle;
//float: right; //doesn't work
}
Photo Example of Desired Result:
So I am doing a navigation menu in CSS, but I can't seem to get it correctly.
I have 4 li elements inside a ul. I want the space between these elements to resize responsively, depending on the size of the window.
I thought about using the margin-right property with like a 10% value, so the elements would spread apart more if the window is bigger. Long story short this method doesn't work and I wanted to see if anyone knows how I can make it work. I'll leave the important code beneath.
#links li{
margin-right: 10%;
}
#navbar li{
display: inline-block;
}
.container-nav{
width: 85%;
margin: auto;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
}
<nav id="navbar">
<div class="container-nav">
<ul id="links">
<li>Inicio</li>
<li>¿Quiénes somos?</li>
<li>Servicio</li>
<li>Contacto</li>
</ul>
</div>
Thanks a lot for the help!
If you set the style for links to be
#links{
display: flex;
justify-content: space-between;
}
This code is setting the Links ul to be a flex container and spacing the elements evenly
https://codepen.io/adamjamesturner/pen/MWYNxrx
EDIT:
The issue with your code is you need to set the ul to be a flex-container which then, by default, has a flex-direction: row and so gives the behaviour you desire.
I need to centre a div. This div is the width of its 2 containing 'rows'. The width of these 'rows' is defined by their content. The content has both left and right aligned elements. I also need the content which is less tall to be vertically centred.
So far Ive done all of this. I also need a background colour on the rows and a space between them. Ive done the space with div.spacer but im wondering if its possible to achieve the same thing without an empty div to keep my markup cleaner?
Im struggling as display table-row and table-cell don't allow for margin.
I also tried using pseudo content to absolutely position a white block over the top to make it look like there was a space between the rows, but relative display doesnt apply well to an element with display table-row cross browser.
I tried using the border-spacing css property but it adds margin both above and below rows, and I just need the margin below.
Below is my markup. The image shows exactly what I need to achieve, so can I do the same thing without div.spacer?
http://codepen.io/anon/pen/ZWMPgB
<div class="cont">
<div class="row">
<h2>Heading</h2>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="spacer"></div>
<div class="row">
<h2>Longer Heading</h2>
<ul>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</div>
</div>
body {
padding-top: 10px;
}
* {
margin: 0;
padding: 0;
}
.cont {
display: table;
margin: auto;
}
.row {
display: table-row;
background: grey;
}
h2 {
display: table-cell;
padding-right: 50px;
font-size: 3em;
}
ul {
display: table-cell;
vertical-align: middle;
}
li {
display: inline-block;
}
.spacer {
display: table-row;
height: 10px;
}
Maybe you need something like this:
.row > * {
border-bottom: 5px solid #ffffff;
}
This will add 5px space after your rows.
I am trying to center a div inside a table-cell element. I really tried all the previous answers but I simply could not figure it out. Here is the code I am using:
HTML skeleton:
<div class="selection">
<div class="selection_empty">
<p>No selection.</p>
<p>Click the button below to start the process.</p>
<span class="selection_icon ico_add_medium"></span>
</div>
</div>
CSS style:
.selection {
display: table-cell;
width: 50%;
padding: 0 10px 0 10px;
}
As I mentioned, I tried everything I found on but nothing did the trick. I would really appreciate your help! Thank you!
Add vertical-align: middle because is a table cell style, if you change the table cell style the trick will be other, but without changing nothing:
.selection {
display: table-cell;
width: 50%;
padding: 0 10px 0 10px;
vertical-align: middle;
}
I add the fiddle link to show this works:
https://jsfiddle.net/qL5sf9uo/
I am trying to vertical align middle for my input and a tag element inside a div.
I have
<div id='title-container'>
<img id='logo' src='images/topLogo.png'>
<div id='search'><input type='text'><a id='btn' href='#'>test button</a></div>
</div>
I want to display something like
--------------------------------------------------------------------
| ---------------------------
| | topologic.png | my input box test button
| ---------------------------
|____________________________________________________________________
CSS
#title-container{
height: 80px;
vertical-align: middle;
background-color: yellow;
}
#search{
display: inline-block;
vertical-align: middle;
}
I want to vertical align my input box and test button inside my title-container div and float these two items to the right.
I have tried adding
#search{
display: inline-block;
vertical-align: middle;
float:right;
}
but those element will be on top of the title-container div instead of middle.. Can someone help me about it? Thanks.
The vertical-align property in CSS doesn't do what you'd expect. Typically, inline elements can be vertically aligned in their context via vertical-align: middle. But the context is the height of the text line they’re in, not the parent.
See http://phrogz.net/CSS/vertical-align/index.html
This should do the trick.
HTML:
<div id='title-container'>
<div id='logo'><img src='http://placehold.it/60x40' /></div>
<div id='search'>
<input type='text' />
<a id='btn' href='#'>test button</a>
</div>
</div>
CSS:
#title-container{
height: 80px;
}
#logo, #search {
display: inline-block;
height: 100%;
position: relative;
line-height: 80px;
float: right;
}
#logo {
float: left;
}
#logo img {
vertical-align: middle;
}
See the example.
When you want to play with vertical-align, you need to be aware that stuff like images have default vertical-align values set. This means, even though you set it to be middle for your parent container, it is being set as text-bottom on the image itself, by default.
You need to force it for all your elements inside that you want to act the same way:
http://jsfiddle.net/H9XBA/
#title-container img#logo,
#title-container #search { vertical-align: middle; }
... and it will vertically align :)
Generally, for logo's, I like wrapping them in a DIV and then adding an id to that DIV.
Another way you can vertically-align them to the middle is by using
display: table
for the parent div... and for the children that you want to align middle you put:
display: table-cell;
vertically-align: middle
You can check out an example here:
http://jsfiddle.net/combizs/QGg6P/