I have 2 elements in a div next to each other. How can I make them to be vertical-align=middle?
Example: http://goo.gl/6Hnb4D
HTML:
<div class="selected">
<span class="SelectedOption">Option 1</span>
<b class="button">▾</b>
</div>
CSS:
.selected {
width: 300px;
height: 50px;
border: 1px solid black;
}
.SelectedOption{
width: 250px;
}
.button{
display: block;
float: right;
}
To to align the contents to the middle vertically, just make the line-height the same as height like below:
.selected {
width: 300px;
height: 50px;
border: 1px solid black;
line-height: 50px;
}
Demo Fiddle
Alternative you can use display:table in your container and display: table-cell with vertical-align: middle in your sub as following:
.selected {
width: 300px;
height: 50px;
border: 1px solid black;
display:table;
}
.SelectedOption{
width: 250px;
display: table-cell;
vertical-align: middle;
}
fiddle
In CSS 3, change your class from this...
.SelectedOption{
width: 250px;
}
...to this...
.SelectedOption{
position: relative;
top: 30%;
transform: translateY(-50%);
width: 250px;
}
Top is (50% height) - (.5 * 1em) ...or more-or-less 30% in your option box.
See this terrific blog on the subject: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Related
I have an "empty" div that I'd like to fill with text when I hover over an element. The text should be different for each element we hover over.
Here's the code
.text-info{
height: 50px;
width: 200px;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
}
.economics{
height: 100px;
width: 100px;
border: 2px solid black;
}
.economics:hover{
background-color: grey
}
.workforce{
height: 100px;
width: 100px;
border: 2px solid black;
}
.workforce:hover{
background-color: grey
}
#economics, #workforce{
display: none;
}
<div class="text-info">
<p id="economics">blabla</p>
<p id="workforce">blablabla</p>
</div>
<div class="economics"></div>
<div class="workforce"></div>
I've tried with css only, to set p's to display: block when hovering over .economics or .workforce, with no result.
Any help will be much appreciated, thanks!
With css you can only show elements on hover their parent element, like this:
.economics:hover #economics{
display: block;
}
This will work if #economics is inside .economics.
In this case you can add absolute position to #economics, to be in the .text-info holder visually.
<pre>
p {
margin: 0px;
}
.economics {
height: 100px;
width: 100px;
border: 2px solid black;
display: table;
vertical-align: middle;
}
.economics p:hover {
background-color: grey;
display: table;
height: calc(100% - 0em);
width: 100%;
vertical-align: middle;
}
.workforce {
height: 100px;
width: 100px;
border: 2px solid black;
display: table;
vertical-align: middle;
}
.workforce p:hover {
background-color: grey;
display: table;
height: calc(100% - 0em);
width: 100%;
vertical-align: middle;
}
</pre>
Just to cover other bases, you can use some simply jQuery to solve this using the .hover() method.
<script type="text/javascript">
$(".workforce").hover(function() {
$(".text-info").html("The workforce is amazing.");
}, function() {
$(".text-info").html("");
});
$(".economics").hover(function() {
$(".text-info").html("I love the economy.");
}, function() {
$(".text-info").html("");
});
</script>
Put this at the bottom of your <body> and it should work.
Check: https://jsfiddle.net/tww259xe/
If you really need a pure CSS solution, the only real option with the given markup would be the ~ general sibling selector. The caveat with that is the the sibling must follow the main selector, so you would have to reorder your divs. The CSS would look like so:
.workforce:hover ~ .text-info #workforce {
display: block;
}
.economics:hover ~ .text-info #economics {
display
}
See the fiddle
I'm trying to float two elements of different height, with the shorter one being middle centered.
If I use inline-block instead of float the vertical centering works correctly, but the 'middle' div doesn't stretch to fit.
float example: http://jsfiddle.net/jonofan/r3pejgud/3/
inline-block: http://jsfiddle.net/jonofan/87kwpuxa/
Also interested to hear if people think should be going about this layout a different way entirely.
EDIT: I don't see this to be a duplicate of this question because my current code doesn't use table display. It just so happens that 'use table display' is the best answer in this case.
.header {
width: 600px;
border: 1px solid black;
display: inline-block;
}
.header img {
width: 50px;
float: left;
}
.middle {
position: relative;
top: 50%;
transform: translateY(-50%);
border: 1px solid gray;
height: 20px;
overflow: hidden;
}
.middle .itemheading {
position: absolute;
bottom: 0;
left: 0;
font-size: 1.8em;
}
.middle .itemdate {
position: absolute;
bottom: 0;
right: 0;
}
<div class='header'>
<img src='http://i.imgur.com/J2HToiP.jpg' />
<div class='middle'>
<span class='itemheading'>Heading Text</span>
<span class='itemdate'>Wednesday 01 July 2015</span>
</div>
</div>
Not perfect but you don't have to resort to absolute positioning. Use display: table-cell; instead.
Not sure how the border for .middle is supposed to work.
<div class='header'>
<div class="img-wrap">
<img src='http://i.imgur.com/J2HToiP.jpg' />
</div>
<div class='middle'>
<span class='itemheading'>Heading Text</span>
<span class='itemdate'>Wednesday 01 July 2015</span>
</div>
</div>
.header {
width: 600px;
border: 1px solid black;
}
.header img {
width: 50px;
}
.header .img-wrap {
display: table-cell;
vertical-align: middle;
}
.header .middle {
width: 100%;
display: table-cell;
vertical-align: middle;
border: 1px solid gray;
}
.itemdate {
float: right;
}
http://jsfiddle.net/87kwpuxa/2/
Here is the code.
I have typical form with label, input and helper:
The code:
html:
<div class="container">
<span class="label">Label:</span>
<div class="el">
<input>
<span>helper helper helper</span>
</div>
</div>
css:
.container {
outline: 1px solid black;
width: 200px;
height: 100px;
}
.label{
display: inline-block;
width: 30%;
}
.el{
display: inline-block;
width: 60%;
}
input{
width: 50%;
}
The problem is that Label: aligned opposite second row. I know how to fix that: i can use float: left; or vertical-align: top; in the .label class, but i want to know, why is that happening? Why Label: jump to second row?
p.s. Sorry for my english.
This is because the default value for vertical-align is baseline, which...
Aligns the baseline of the element with the baseline of its parent
For reference, here is the article on Mozilla Developer Network
Please try this one;
.inner {
display: inline-block;
vertical-align: middle;
background: yellow;
padding: 3px 5px;
}
DEMO
I think due to the display:inline-block defined is creating this situation..
Better use display:inline
This will solve your problem...
And here is the code
CSS
.container {
outline: 1px solid black;
width: 250px;
height: 100px;
}
.label{
display: inline;
width: 50%;
}
.el{
display: inline;
width: 60%;
}
input{
width: 50%;
}
HTML
<div class="container">
<span class="label">Label:</span>
<div class="el">
<input />
<span>helper helper helper</span>
</div>
</div>
I'm trying to make my search bar have a fluid input field width, whilst also having a 'search' button next to it.
It seems that the input field .search is way bigger than the containing element called .navigation-right, and it causes the button .search-submit to be pushed out of the containing div. See images below.
The Issue:
What I'm trying to make it look like:
Here is my code: (for convenience I left out the margin & padding values)
CSS
.navigation-right {
width: 282px; min-width: 282px;
height: 50px;
display: table-cell;
vertical-align: top;
border: 1px solid #920000;
}
.search {
width: 100%;
height: 30px;
display: table;
}
.search-input {
height: 28px;
width: 100%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
}
.search-submit {
width: 30px;
height: 30px;
display: table-cell;
vertical-align: top;
margin: 0;
padding: 0;
border: 0;
}
HTML
<div class="navigation-right">
<form class="search">
<input class="search-input">
<button class="search-submit"></button>
</form>
</div>
Replace below class
.search-input {
height: 28px;
width: 70%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
}
Is there a specific need of using display: table; and display: table-cell;? It reminds me of the days when the only way of coding was using tables...
If I may suggest an alternative way of doing the same thing and arguably doing it better :) - the input element will occupy 100% of its parent with the button having a fixed width (good for fluid or responsive layouts).
You have set your search field (.search-input) to have a 100% width, so that will fill its parent. You need to reduce the width to around 250px
.search-input {
height: 28px;
width: 70%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
float:left;
}
.search-submit {
width: 30px;
height: 30px;
display: table-cell;
vertical-align: top;
margin: 0;
padding: 0;
border: 0;
float:left;
}
.search-input {
height: 28px;
width: 100%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
position:relative;
float:left;
}
.search-submit {
width: 30px;
height: 30px;
display: table-cell;
vertical-align: top;
margin: 0;
padding: 0;
border: 0;
position:absolute;
float:left;
}
I have a container with a defined height containing two divs, the first which has a pixel-defined height and the second which I would like to fill the remaining space of its container, i.e. 100% minus first div's pixel-defined height.
Is there a solution to this problem which doesn't involve JavaScript? I can use a JavaScript solution (and in fact JavaScript changing the container's height is what brought me here), but this seems like it should have lower-level support, and this looks like it might become quite a cascading problem.
Example
http://jsfiddle.net/h3gsz/1/
HTML
<div id="container">
<div id="top_content"></div>
<div id="remaining_content"></div>
</div>
CSS
#container {
width: 400px;
height: 400px;
border: 5px solid black;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: 100%;
}
Edit
An answer was already provided for the original fiddle, but in simplifying the question I allowed the answer to introduce new problems: http://jsfiddle.net/h3gsz/6/
I had removed the inline-block styling and a max-width value. Given the absolute positioning of the remaining content, the container's width is no longer defined by said content (from inline-block), so a horizontal scrollbar is introduced where there shouldn't be one.
I'm not sure if I should simply make a new question or not.
#container {
width: 400px;
height: 400px;
border: 5px solid black;
position: relative;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
top: 50px;
bottom: 0;
position: absolute;
}
http://jsfiddle.net/h3gsz/4/
How about using overflow:hidden;?
#container {
width: 400px;
height: 400px;
border: 5px solid black;
overflow:hidden;
}
JSFiddle.
Why not just use auto?
http://jsfiddle.net/h3gsz/3/
CSS:
#container {
width: 400px;
height: auto;
border: 5px solid black;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: auto;
}
you could also do it by using display:table; fiddle here
.main, .sidebar {
float: none;
padding: 20px;
vertical-align: top;
}
.container {
display: table;
}
.main {
width: 400px;
background-color: LightSlateGrey;
display: table-cell;
}
.sidebar {
width: 200px;
display: table-cell;
background-color: Tomato;
}
Someone more experienced might have a better option but you can try this :
#container {
width: 400px;
height: 400px;
border: 5px solid black;
overflow: hidden ;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: 100%;
margin-bottom: 0;
}
Depending on what you want to use this for you could remove the #remaining_content <div>
HTML:
<div id="container">
<div id="top_content"></div>
</div>
CSS:
#container {
background-color: green;
width: 400px;
height: relative;
min-height:400px;
border: 5px solid black;
overflow:none;
word-wrap:break-word;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}