Is it possible to position div to bottom without using position:bottom? Actually, I can do it with:
bottom: 0;
position:absolute;
But because I'm using float: right , I can't use position:absolute
So what is the best solution? :3
You can use display: flex to position an element to the bottom, though it will affect all of your elements placed into that div.
To position an element to the bottom using flex try this:
.container {
display: flex;
}
.button {
align-self: flex-end;
}
Related
newbie here starting with the basics of HTML and CSS. I really have a hard time centering a simple div (a square in my example). I've watched many tutorials as well as read many articles but still cannot really figure out the "best" way to do it. With so many different ways like align-items, align-content, justify-items, justify-content, I get overwhelmed at some point especially with how these behave with different displays (flex, grid, inline-block etc), not to mention the positions of parents and childs. Below is an example that I still can't quite easily manipulate/center. The HTML is only the boilerplate and a blank div with class square inside the body. Thank you all in advance for your tips!
html {
height: 100%;
}
body {
min-height: 100%;
background-color: #162944;
}
.square {
height: 10rem;
width: 10rem;
background-color: salmon;
display: flex;
align-items:center;
justify-items: center;
align-content: center;
justify-content:center;
place-content: center;
place-items: center;
}
The above example has been tried with all possible combinations and NOT only as you see it. Also with display:grid; and others. Is there really not a simple way to center an object on your page?
One way to center a div is to set the width of the element and then use the margin property to set the left and right margins to auto. This will horizontally center the element within its container.
For example:
.element {
width: 400px;
margin-left: auto;
margin-right: auto;
}
You can also by using the text-align property.
.shape {
text-align: center;
}
Also by using the margin property.
For example:
.shape {
margin: 0 auto;
}
Finally, you can center a div when it comes to shapes by using the transform property.
For example:
.shape {
transform: translate(50%, 50%);
}
Centering a div can be easy or hard based on your layout options and what you want to achieve.
The simplest way to horizontally center a div, add a width and margin: 0 auto.
Simplest way to horizontally and vertically center a div is using a flexbox, display: flex; justify-content:center; align-items:center. Also you can go with display:table and display:table-cell.
Last option is to use Positioning. You can take a div, style it with position:relative and add a height:300px,width:300px. Then inside the parent div, add a child div and style it with position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:50px; width:50px
I'm trying to get the button at the bottom of each div to align together to the other div.
I have tried using but it still can't work.
position:absolute;
bottom: 0;
This is my current work : https://www.bootply.com/NrkiUsvKa5
I'm trying to get to this result without calling break : https://www.bootply.com/gdP1LUvflA
As i noted in the comments, you can add a flexbox propperty to your row (i added it as a class in my example, see bootply link), and it will line out perfectly.
.flexbox-container {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
Check for the outcome here: https://www.bootply.com/iTaThCIrjb
For more documentation, read this article: https://davidwalsh.name/flexbox-column
Apply the flexbox and it wouldn't matter how long you would make your lines. This would render the awnser with a fixed height obsolete
Set the div to a fixed height and use:
#btn{
position: absolute;
bottom: 0;
left: 0;
}
Make relative the container div of the button and then give absolute position like below example.
<style>
.btnwrap { position:relative}
.btn { position:absolute; bottom:0}
</style>
<div class="btnwrap">
<a class="btn">Button</div>
</div>
https://jsfiddle.net/ahqamm7o/1/
#parent {
text-align: center;
}
.content {
display: inline-block;
text-align: left;
margin: auto;
width: 50%;
}
.menu {
float: left;
text-align: left;
width: 20%
}
I tried using techniques from CSS: center element within a <div> element but this does not seem to apply for DIVs with an 'inline-block' style.
Note 'inline-block' is not a requirement I have, I am just merely looking for the menu to float left and the content to be positioned directly to the side of it (with the content centered relative to 'parent')
I am trying to center 'content' relative to 'parent'
(that is, center 'content' as if 'menu' was not there).
If you specified the limited width then float:left is not needed, apply the text-align:center to the .content class so it will align the content center with in that particular div, if we use position:absolute the parent should be in position:relative.
You had some tag issues: An extra section tag, div tag.
To solve your issue I removed float: left from .menu and added:
position: absolute;
top: 0px;
left: 0px;
This will always position the menu on the left and the primary content will be centered as if the menu is not there.
Fiddle: https://jsfiddle.net/ahqamm7o/2/
I tried to make a text inside a div, I made code saying: text-align:center; and padding:30px 0px; but padding is NOT working..the text just stays at the top of the div, but should be in the center..(from top to bottom).
Maybe is it because of the div's position absolute??
I don't know, please help me
Since the div's position is absolute, You can use the top, bottom, left, and right attributes to add a padding around the div.
text-align: center; is used for horizontal alignment.
For vertical alignment, there are other methodologies you should use. Take a look at this link, it gives you all different bits and pieces:
https://css-tricks.com/centering-css-complete-guide/
.container {
position: absolute;
text-align: center;
padding : 30px 0;
}
Your css may be look like above css code. If you given absolute position for the div you are removing the flow of the div from the dom tree. so its width may be shrink to the content of the text width. So you need to mention the width for the div as below. it will work jsfiddlelink
.container {
position: absolute;
text-align: center;
padding : 30px 0;
width: 100%;
}
Why don't you use line-height: [height of div]?
.container {
position: absolute;
height: 100px; (or anything else)
line-height: 100px; (must be the same as the height)
text-align: center;
}
Then it should be centered. I Hope I helped! :-)
I know when we set margin left and right to auto value for an html block element that has a specified width, then the element has center position.
But if I want to wrapper to have auto size depend on content, I set display : inline-block, but now center position is not working.
What should I do?
If you're setting display: inline-block to an element you can have a wrapper to that element with:
.wrapper {
text-align: center;
}
Demo: http://jsfiddle.net/sGaTZ/
If you don't want to use a wrapper, you can try this:
<div class="box">test</div>
and the CSS:
.box {
display: table;
border: 1px solid blue;
margin: 0 auto;
}
Using display: table with no specific width will cause the box to shrink-to-fit the content. You can then center it using margin: 0 auto.
Demo fiddle: http://jsfiddle.net/audetwebdesign/FdnGs/