This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How do I get a div to float to the bottom of its container?
I have this code to float a div to the bottom right side of a div. But the span gets stuck to the upper left.
<div id="color_tile" class="select_tile" title="Choose color" style="background: grey; background-image: url(wallpaper/201_color_picker.jpg);" >
<span id="color_picker" style="visibility: visible; display: block; float: right; vertical-align: bottom;"></span>
</div>
Is there a different way to place the span?
You should probably separate your HTML/CSS from each other properly.
Your code could look something like this
HTML:
<div>
<span>Absolute right bottom aligned to div...</span>
</div>
CSS:
div { position: relative; }
div > span { position: absolute; right: 0; bottom: 0; }
Obviously your div should have some height/width which exceeds that of the span, but generally this is a very acceptable way of doing it.
This doesn't make the content of the div 'flow' around the span but that wasn't specified clearly. As said, what you have there should work in that case and if it doesn't it is in the rest of your code.
vartical-align is very particular to get to work (which is why I almost never use it)
On the span:
position:absolute; bottom:0; right:0;
and put a height/width on the parent div and you'll be all set
Related
I will be making the arrows clickable to scroll left/right in the div
I have a div which contains a bunch of elements (arrows are not included in the div for my method) as seen here
I want to align the arrows as seen in the image, however these are not responding as expected when the page is a different size due to the terrible method I have wrote.. what would be the best way to do the above?
At the moment my code looks like this:
<img src={arrowLeft} alt="Left Arrow" className="arrow"></img>
<div className="gridRow">
......content for elements here.......
</div>
<img src={arrowRight} alt="Right Arrow" className="arrow right"></img>
And the CSS:
/*Arrow images*/
.arrow {
border: 1px solid red;
position: absolute;
top: 121%;
}
.arrow.right {
left: 91.7%;
}
.arrow:hover {
cursor: pointer;
}
Thanks
Instead of giving position: absolute to the two arrows (which will make them unresponsive to screen changes), you could just wrap everything inside a div and give the div the following CSS properties:
display: flex;
align-items: center.
This way, all the elements will be in a row and vertically centered.
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
How to align a div to the left and another div to the center?
(2 answers)
Closed 4 years ago.
I currently have a "header" div which contains the title of my site and an image of the product. The title is an h1 (heading) and the image is supposed to be floated to the left. I am centering the heading with text-align: center and using float: left on the image. The problem is that the image takes space and moves my title to the left which makes it look very strange when you compare it to the footer which is correctly centered.
It is possible that this is a duplicate of a common problem but due to my limited knowledge in CSS terms, it makes it very hard to find the answer by a Google search. I've used multiple search phrases but I've yet to find anyone with a similar problem.
I've tried multiple ways such as using position: absolute and similar ways which don't seem to work. I've also tried putting the img and h1 in a different order in the HTML, if I put the image after the heading it will cause the image to "drop down" under the whole div and this looks even odder.
Code (HTML & CSS)
| HTML
<div class="header">
<img src="assets/image/Logo-small.png">
<h1>Llama Capture</h1>
</div>
| CSS
.header {
width: 100%;
height: 6%;
text-align: center;
background-color: black;
}
.header img {
height: 100%;
float: left;
}
I expect the heading to be fully centered just as the footer is and I thought text-align would work without the influence of other elements in the div. The actual result would definitely irritate someone with an eye to detail.
I am thankful for anyone that could point me in the right direction, I might have overlooked this problem and so I'm happy if someone more experienced could share their knowledge on this.
use position:absolute; and left: right: values instead of float:right/left
.header {
width: 100%;
background-color: black;
color:#fff;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
.header img {
height: 100%;
position:absolute;
left:10px;
top:50%;
transform:translateY(-50%);
}
<div class="header">
<img src="https://picsum.photos/20">
<h1>Llama Capture</h1>
</div>
This question already has answers here:
Why my inline-block divs are not aligned when only one of them has text? [duplicate]
(4 answers)
Why does this inline-block element have content that is not vertically aligned
(4 answers)
My inline-block elements are not lining up properly
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Understand inline-element, vertical-align, line-box and line-height
(1 answer)
Closed 4 years ago.
This might sound like an outdated topic since no one still uses inline-block property thanks to flex-box and grid but I was wondering about it and I would like to inquire about it.
When creating two divs and assigning them both to display as inline-block and then adding any element inside one of them, the result is quite strange, where the div which contains that element will slide down to the bottom of the other div minus the height of the added element.
div {
display: inline-block;
width: 100px;
height: 150px;
background: gray;
}
<div id="left">
<span>Text</span>
</div>
<div id="right"></div>
To fix the issue it's only enough to align the div vertically to the top, but what is strange too is that we get the same result even if we align the other div which is not affected without aligning the affected one, so what exactly is happening here?
div {
display: inline-block;
width: 100px;
height: 150px;
background: gray;
}
#left{
vertical-align: baseline;
}
#right{
vertical-align: top;
}
<div id="left">
<span>text</span>
</div>
<div id="right"></div>
UPDATE:
To clarify things more I removed the child element and added a text outside the two divs, and added two more divs, now all divs are without a flow content, but the first two both of them have a top property while the last two are different, one top and the other is baseline:
div {
display: inline-block;
width: 100px;
height: 150px;
background: gray;
}
.right{
vertical-align:baseline;
}
.left{
vertical-align:top;
}
Text
<div class="right"></div>
<div class="left"></div>
<br>
Text
<div class="left"></div>
<div class="left"></div>
In the first case the Text aligned to the top and in the next aligned to the baseline of the divs even they don't have a flow content.
The reason this happens, is because the default vertical-align value for inline elements is baseline.
Then the question becomes: what is the baseline of an inline-block element? Here, we have to make a distinction between elements with and without flow content:
For elements with flow content, such as the left div in your question, the baseline is the same as the baseline of the last content element.(*) For the left div, this corresponds to the baseline of the inner span.
(*) There are some additional considerations when setting the element's overflow, but I'll leave that out of scope.
For elements without flow content, such as the right div in your question, the baseline is the bottom of the element's margin box. For the right div, this corresponds to the bottom of the div itself.
So, to summarize: the reason you're seeing a vertical shift is because the elements are vertically aligned according to their baseline, and the baselines for elements with and without content are calculated differently.
To test this out, just try adding some text to the right div, and you'll see how both baselines are now the same.
div {
display: inline-block;
width: 100px;
height: 100px;
background: gray;
}
<div id="left">Text</div>
<div id="right">Other text</div>
By animating the font size, the example below demonstrates even more clearly how changes in the baseline affect vertical positioning:
div {
display: inline-block;
width: 100px;
height: 100px;
background: gray;
}
#left {
transition: all 2s ease;
animation: anim 2s infinite linear alternate;
}
#keyframes anim {
0% {font-size: 100%;}
100% {font-size: 300%;}
}
<div id="left">Text</div>
<div id="right"></div>
The display: inline-block Value
Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
and
excuse me textarea is inline-block, but what line is correct,
the browser think the bottom of second inline-block is position of line so
when he go to draw children he see the textarea must be inline and change position of it to the bottom of second inline-block is position of line and because it is any padding and it position are relative it cause to parent div move to bottom just for textarea be inline
<div id="site_wrapper">
<div id="top"><?=$top?></div>
<div id="wrapper">
<div id="login_wrapper">
<?=$content?>
</div>
</div>
<div id="footer"><?=$footer?></div>
</div>
Where
$top should be drawn on the very top of the page.
$content should be centered both vertically and horizontally of the page.
$footer should be drawn on the very bottom of the page.
I do not want either of the divs to follow the view, I found two solutions for the problems one by one, but none to combine them, seeing as they both had the height element in css. So first I guess if it even is possible (which I guess it is) second is then of course, how?
Edit: Pretty much like this side, the top bar should always be on the top, that one is fairly straight forward.
Then the #login_wrapper should always be centered in the site with a fixed height.
Last the footer should always be on the bottom (it should be pushed not stickied), because in this case #login_wrapper wont fill out the site.
The #top and #footer both have fixed heights as well.
Edit2: Fixed some clarifications for the problem.
Found solution from this site [link]http://stackoverflow.com/questions/7909587/horizontal-and-vertical-centering-above-a-sticky-footer-in-css
Thanks anyway!
If i understand your question, try with this css
#site_wrapper
{
position: relative;
}
#top
{
position: relative;
top: 0px;
}
#footer
{
position: relative;
bottom: 0px;
}
#wrapper
{
position:relative;
vertical-align: middle;
height: 100%;
}
#login_wrapper
{
/* add some height */
}
This question already has answers here:
How to center a button within a div?
(16 answers)
Closed 3 years ago.
I'm trying to align an HTML button exactly at the centre of the page irrespective of the browser used. It is either floating to the left while still being at the vertical centre or being somewhere on the page like at the top of the page etc..
I want it to be both vertically and horizontally be centered. Here is what I have written right now:
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname
</button>
Here's your solution: JsFiddle
Basically, place your button into a div with centred text:
<div class="wrapper">
<button class="button">Button</button>
</div>
With the following styles:
.wrapper {
text-align: center;
}
.button {
position: absolute;
top: 50%;
}
There are many ways to skin a cat, and this is just one.
You can center a button without using text-align on the parent div by simple using margin:auto; display:block;
For example:
HTML
<div>
<button>Submit</button>
</div>
CSS
button {
margin:auto;
display:block;
}
SEE IT IN ACTION: CodePen
Edit by author: This is a really out of date answer! Flexbox or grid are much better.
I've really taken recently to display: table to give things a fixed size such as to enable margin: 0 auto to work. Has made my life a lot easier. You just need to get past the fact that 'table' display doesn't mean table html.
It's especially useful for responsive design where things just get hairy and crazy 50% left this and -50% that just become unmanageable.
style
{
display: table;
margin: 0 auto
}
JsFiddle
In addition if you've got two buttons and you want them the same width you don't even need to know the size of each to get them to be the same width - because the table will magically collapse them for you.
JsFiddle
(this also works if they're inline and you want to center two buttons side to side - try doing that with percentages!).
try this it is quite simple and give you cant make changes to your .css file this should work
<p align="center">
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname</button>
</p>
Here is the solution as asked
<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>
There are multiple ways to fix the same. PFB two of them -
1st Way using position: fixed - position: fixed; positions relative to the viewport, which means it always stays in the same place even if the page is scrolled. Adding the left and top value to 50% will place it into the middle of the screen.
button {
position: fixed;
left: 50%;
top:50%;
}
2nd Way using margin: auto -margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering… until now! But actually absolute centering only requires a declared height and these styles:
button {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 40px;
}
For me it worked using flexbox.
Add a css class around the parent div / element with :
.parent {
display: flex;
}
and for the button use:
.button {
justify-content: center;
}
You should use a parent div, otherwise the button doesn't 'know' what the middle of the page / element is.
Place it inside another div, use CSS to move the button to the middle:
<div style="width:100%;height:100%;position:absolute;vertical-align:middle;text-align:center;">
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname</button>
</div>​
Here is an example: JsFiddle
Make all parent element with 100% width and 100% height and use display: table; and display:table-cell;, check the working sample.
Working Git Version
<!DOCTYPE html>
<html>
<head>
<style>
html,body{height: 100%;}
body{width: 100%;}
</style>
</head>
<body style="display: table; background-color: #ff0000; ">
<div style="display: table-cell; vertical-align: middle; text-align: center;">
<button type="button" style="text-align: center;" class="btn btn-info">
Discover More
</button>
</div>
</body>
</html>