I have to complete a combobox to choose the time.
As you can see, the context "from" is not alined to the combobox.
The HTML code for the two dives are:
<div id="fromMessage" style="width:30px;height:100%;float:left;padding-left: 50px;vertical-align:central">
<oj-label for="Time" style="font-size: 15px">From:</oj-label>
</div>
<div id="seelctTime" style="width:300px;height:100%;float:left;padding-left: 50px">
<oj-input-date-time id="Time" value='{{time}}' on-value-changed="{{timeChanged}}">
</oj-input-date-time>
</div>
Why vertical-align:central does not work?
You can also use:
#idMessage
{
position: absolute;
top: 50%
}
in a separate .css file.
top doesn't have to be 50%, just play with percentage til you've got it where you want it
Try this:
#fromMessage,
#selectTime {
display: inline-block;
vertical-align: middle;
float: none;
}
The vertical-align method will only work if you use it in a table or when the element is an inline-block element, but whichever method you use the parent's height need to be specified in order for it to work.
The only method which doesn't require height would be using flexbox.
There are few ways that you could vertically center element, below is one of the method.
The key things to vertically center are:
fix height
absolute positioning
margin auto
0 top value
0 bottom value
Example:
#fromMessage{
width: 30px;
float: left;
padding-left: 50px;
height: 30px; /*fix height*/
position: absolute;
margin: auto;
top: 0;
bottom: 0;
}
#fromMessage, #selectTime {
width:30px;
height:100%;
float:left;
padding-left: 50px;
vertical-align:middle;
}
Related
Im trying to move a div inside another div down a bit, but when I use
margin-top: 10px;
It makes a white gap at the top. Heres the html:
<div id="topb">
<div id="selection">
</div>
</div>
And heres the CSS:
#topb {
background: url(images/tomato-background.jpg) no-repeat fixed;
background-size: cover;
height: 100%;
width: 101%;
margin-left: -10px;
}
#selection {
background-color: #4d4d4d;
width: 60%;
height: 500px;
margin: auto;
margin-top: 40px;
}
And heres a screenshot of the website:
For this, you can use position: absolute. Here is the code:
#topb {
background: url(images/tomato-background.jpg) no-repeat fixed;
background-size: cover;
height: 100%;
width: 101%;
margin-left: -10px;
}
#selection {
background-color: #4d4d4d;
width: 60%;
height: 500px;
margin: auto;
position: absolute;
top: 40px; /*This is where it is changed as well as the line above*/
}
Hope it helps! I think padding would still leave a background, so this is a better idea.
maybe you can modify the parent element by adding padding-top:10px; instead of modifying the child.
This is a "collapsed margin" problem.
It has been answered in this question :
Why would margin not be contained by parent element?
You would have to change the parent div to either (1) add a border, (2) position absolute, (3) display as inline-block, (4) overflow auto.
Refer to the posted link for more detail.
Here is the working fiddle Hope it may help.
position:absolute;
position:relative;
This is because when you have a block element (display: block) inside another block element, the margins will collapse. It will only be considered the largest margin.
So, in your example it will only consider one of the margins (40px).
See reference about collapsing margins.
There are a few workarounds. Choose any:
using padding instead of marginfor the component inside.
Change display type. e.g. display: inline-block.
Use absolute positioning.
Remove margin-top style in #selection, and apply padding-top to #topb
I'd like to center my copyright and also the logo (Windows Logo). How can I center these on the page using CSS. I thought I had the correct CSS, but it's still showing on the left.
Check out my jsfiddle.
Jsfiddle: http://jsfiddle.net/huskydawgs/z9j9rsz2/27/
Here's my code:
<div class="topbar">
<div id="logo">
<img src="http://fc01.deviantart.net/fs71/f/2012/048/4/0/microsoft_windows_8_logo_by_pooterman-d4q0ub4.png" />
</div>
Copyright © 2014 Microsoft
Here's my css:
.topbar {
width: 100%;
background: #f66511;
height: 34px;
line-height: 1;
}
.copyright{
color:#232323;
font-size:11px;
margin: 0 auto;
position: absolute;
top: 18px;
text-align: center;
}
For the copyright just add width:100%;. You need this because you've set the element to be absolute, so you have to define the width if you want the text alignment attribute to work.
For the image just add another text-align attribute:
#logo {
text-align:center;
}
First, get rid of position: absolute, if you want the copyright notice in the top bar, then nest it in the appropriate parent element. you'll want to nest it in 'topbar'.
I've messed with your jsFiddle to include the correct behavior.
Basically, removing the absolute positioning and specifying the topBar to have a text-align: center property will center all child text elements, in this case, your copyright.
For the image I just made it display: block and gave it a margin of margin: 0 auto; which centers the image within its parent container.
You cannot have automatic margins with an absolute position.
If you are trying to position your copyright, you should actually use a top margin.
It could look something like this:
.copyright{
color:#232323;
font-size:11px;
margin: 18px auto 0 auto;
position: relative;
text-align: center;
}
Hope this helps!
If you want to use the position:absolute for the .copyright then give the div a width of 100%. For the image, set it to display block and give it a margin: 0 auto.
#logo img {
display:block;
margin: 0 auto;
}
.copyright{
color:#232323;
font-size:11px;
margin: 0 auto;
position: absolute;
top: 18px;
text-align: center;
width:100%
}
Here is a an updated fiddle
No problem, just use translate and absolute positioning:
img{
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
What's happening here is that your image starts halfway into the screen (left: 50%). The trouble is that then the image is too far right, so you translate it back 50% (which refers to the width of the element).
You can use this to center on the vertical axis as well, with top: 50% and translate(x, -50%)
This codepen has more than you need, but you can see the translation at work in .loading.
I corrected your DOM implementation and CSS.
here is the JSFiddle
http://jsfiddle.net/z9j9rsz2/43/1
CSS
.topbar {
width: 100%;
background: #f66511;
height: 34px;
text-align: center;
}
.copyright{
color:#232323;
font-size:11px;
line-height: 32px;
}
#logo {
margin: 0px auto;
display: block;
}
HTML
<div class="topbar">
<span class="copyright">Copyright © 2014 Microsoft</span>
</div>
<img src="http://fc01.deviantart.net/fs71/f/2012/048/4/0/microsoft_windows_8_logo_by_pooterman-d4q0ub4.png" id="logo" />
A related question is here and the answer does not work for me. In brief there are 2 columns left and right. And the right column have a children <div> or <section> or something. When the page is scrolled, the children must not scroll or move. Adding position: absolute to the child lets the child to scroll along with the page. And position:fixed making the child to appear at screen's extreme left or right and screen top depending on right:0 or left:0. How to make this fixed inside the right column?
The JSFIDDLE is here.
You can modify .right-inner class as follows to get the desired result
.right-inner{
position: fixed;
margin-right: 5%;
text-align: middle;
}
see the updated Fiddle
Instead of 0, the value of .right's left-position should be (at least) the value of the width of the left column
for example:
.right{
position: fixed;
top: 0;
left: 360px;
}
You don't need the wrapper for .right, so I've elliminated it in this fork of your fiddle: http://jsfiddle.net/ynMYm/
Try this:
.outer{
display: block;
width: 600px;
}
.left{
width: 350px;
border-right: 1px solid #555;
float: left;
}
.right{
top: 0;
left: 0;
width: 250px;
margin-left:350px;
position: fixed;
}
.right-inner{
position: fixed;
}
Fiddle: http://jsfiddle.net/5wM4V/42/
Full screen view: http://jsfiddle.net/5wM4V/42/embedded/result/
I'm trying to center a text div in a custom slider.
For some reason the CSS won't work. The website is on my test server at http://bit.ly/ZgawU6
I want to center the group of text 'Environmental Concern' in the top slider. Similar to this website www.sevenly.org
It works when I change the div to position:relative, instead of position:absolute; however I can only change it with Chrome inspector. When I add it to the CSS file it doesn't work.
Can anyone point me in the right direction as to why this code isn't working?
.custom-slider-caption, .custom-slider-title {
line-height: 1.3;
text-align: center;
position: relative;
}
The div in question:
<div class="custom-slider-title" style="top: 0px; opacity: 1;"><div style="position: absolute; left:”0″px; top:140px; right:”0″px; bottom:px; font-size: 43px; color:#fff; text-shadow: 4px 4px 1px #497ca0; ">Environmental Concern</div></div>
It doesn't works on an absolute position because absolute positioned elements aren't 100% width. You can set the witdh to 100%, or, a bit cleaner solution would be to set the right value to zero. So you will have left and right positions to zero and width will be automatically be 100%.
div {
positon: absolute;
top: 140px;
left: 0;
right: 0;
}
You even don't need to specify px if value is qual to zero, because any dimension set to zero in %, em, px or whatever will all have the same size. Zero is zero.
.custom-slider-caption, .custom-slider-title {
width: 100%;
line-height: 1.3;
text-align: center;
}
Your code should look something like this if you want the div to be centred
#div
{
width:600px;
margin-left:auto;
margin-right:auto;
}
// NOTE: THE WIDTH CAN BE CHANGED //
#div p
{
width:300px;
margin-left:auto;
margin-right:auto;
}
The answer of pzin is correct. Use this selector:
.custom-slider-title > div {
...
left: 0;
right: 0;
}
I'm looking for a way to center a div horizontally in the page on Google Chrome.
I tried using margin: auto; but I've read that this function is not supported in Google Chrome. As a result my div stays aligned to the left side of the screen.
If I use, for example, margin-left: 100px; the div does move toward the center of the page, but I don't want to center it manually.
HTML:
<body>
<div id="header">
<p>John Doe</p>
<p>email</p>
</div>
</body>
CSS:
body
{
background-color: #f0f0f0;
}
div
{
border-radius: 5px;
}
#header
{
position: fixed;
background-color: #3399ff;
color: white;
width: 60%;
margin: auto;
}
#header p
{
display: inline;
}
margin: auto will not work on a fixed (or absolute) position div. Instead you need to set left: 50% and the left margin to negative half of the element width.
#header
{
position: fixed;
width: 60%;
left: 50%;
margin-left: -30%;
}
http://jsfiddle.net/ZAqJM/
UPDATE: as of now most browsers will support transfrom: translate so you can comfortably do:
{
position: fixed;
left: 50%;
transform: translateX(-50%);
}
I know this is quite old but I think is worth mentioning that the following works like magic:
#header {
left: 50%;
transform: translateX(-50%);
}
For future references.
Centering a <div> using margin: auto; works cross browsers. You need to make sure the div that you're trying to center is contained in a block-level element.
<div class="headerContainer">
<div id="header">
<p>John Doe</p>
<p>email</p>
</div>
</div>
To properly center, your div#header needs to be block-level and must have a width and is a child element of a block-level element. (Technically <body> is block-level but you might want to maintain your header's "containership")
Therefore, remove the position: fixed from #header { ... }. Please see working example: http://jsfiddle.net/amyamy86/2sXdC/
margin:auto is for the object that has width and set the left-right margin equally.
Div is basically BLOCK with FULL-WIDTH (100%) so set margin:auto is doesn't get anything since the width is full to the parent.
To make it work, you can did that by 2 ways,
use text-align:center for div -> this will align text inside div center
include width property in div (i.e. width:200px) and it will work fine.