I am having this simple issue here, which worked before at a lot of places.
I am trying to align items inside a div vertically and at the center. Here in this code the margin-left works, but the margin top doesn't, I tried changing it to bigger values, still no effect at all.
.footer {
background-color: #2E7FB6;
color:white;
height:50px;
}
<div class="footer">
<section style="margin-left:15px; margin-top:10px;">FETCHED: {{ recordsFetched }} Work Order(s)</section>
</div>
Remove the inline styling, use flexbox with flex-direction: column; justify-content: center; and text-align center; on the footer.
.footer {
background-color: #2E7FB6;
color:white;
height:50px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
<div class="footer">
<section>FETCHED: {{ recordsFetched }} Work Order(s)</section>
</div>
Use flexbox tips just #rprm192 say. But if you want to make it more simple and support older browser, you can use line-height. Here's code for you
.footer {
height: 50px;
}
.footer section {
height: 100%;
line-height: 50px; //make it same as height value
}
Related
Is there any way to center elements that use text-align: left and doesn't involve display: inline-block?
I'm creating an epub and when centering the paragraphs through div and inline-block it breaks the page layout (see links with example).
HTML
<h2 class="numero_hino"></h2>
<h3 class="titulo_hino sigil_not_in_toc"></h3>
<div class="centralizar-div">
<div class="estrofe-div">
<p class="estrofe"></p>
<p class="estrofe"></p>
<p class="estrofe"></p>
</div>
</div>
CSS
div.centralizar-div {
text-align: center;
}
div.estrofe-div {
display: inline-block;
text-align: left;
}
How it should be:
Book in continuous mode (scroll down)
How it is:
Book in single page mode
If anyone can help me :D
try change .estrofe-div p { display: inline-block; text-align : center }
Please try the below css
div.estrofe-div {
display: flex;
align-items: center;
justify-content: center;
}
Since your are using inline-block on your divs as way to position your content, we keep it the same and add an extra css targeting only the tags.
div.centralizar-div {
text-align: center;
}
div.estrofe-div {
display: inline-block;
text-align: center;
}
div.estrofe-div p {
text-align: left;
}
Because of people's comments, I was researching until I found a way to solve the problem through flex items.
Follow the code
div.centralizar-div {
display: flex;
flex-flow: column wrap;
align-items: center;
}
HTML
<div id="flexbox-container">
<h1 id="test1">test1</h1><h1 id="test2">test2</h1><h1 id="test3">test3</h1>
</div>
CSS
#flexbox-container {
display:inline-flex;
}
#test1 {
float:left;
}
#test2 {
justify-content:center;
align-items:center;
text-align:center;
align-self:center;
align-content:center;
}
#test3 {
position:relative;
left:1000px;
}
Why does test2 not center itself in the flex? I would prefer not to have to set px or margin to get it to centre. I tried all sorts of aligning stuff on it yet it still sticks to the left. I need the three items to be inline, so setting it to flex wouldn't work (though it does center align if I make it flex), PLEASE HELP IVE BEEN TRYING FOR DAYS
https://codepen.io/throwaway123/pen/mdpJJKY
Only this much code is enough. No need for all those styles for separate h1 tags. You have to give the aligning styles to the parent div.
#flexbox-container {
width: 100%;
display:inline-flex;
justify-content: space-between;
}
<div id="flexbox-container">
<h1 id="test1">test1</h1>
<h1 id="test2">test2</h1>
<h1 id="test3">test3</h1>
</div>
Basically that isn't how flex works.
You don't want the contents of the second item to be justified within itself, you want the container to have that element centered.
If you scrap all the positioning of the three items you can get flex to do the work for you. There are several ways of telling it how you want the items set out in the line. For example justify-content: space-between.
From MDN:
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
#flexbox-container {
display: inline-flex;
justify-content: space-between;
width: 100vw;
}
<div id="flexbox-container">
<h1 id="test1">test1</h1>
<h1 id="test2">test2</h1>
<h1 id="test3">test3</h1>
</div>
Using IDs for css is bad practice. I'd suggest you to start using class selectors
Anyway, here is solution to your problem :
<style>
#flexbox-container {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
If you want the h1 tags centered too you can wrap the h1 tag by a div. Then you can assign the div text-align: center CSS Property.
#flexbox-container {
background: green;
display:flex;
justify-content: space-between;
text-align: center;
}
#flexbox-container div {
width: 100%;
}
<div id="flexbox-container">
<div>
<h1 id="test1">test1</h1>
</div>
<div>
<h1 id="test2">test2</h1>
</div>
<div>
<h1 id="test3">test3</h1>
</div>
</div>
I have a div that's width is 100%.
I'd like to center a button within it, how might I do this?
<div style="width:100%; height:100%; border: 1px solid">
<button type="button">hello</button>
</div>
Updated Answer
Updating because I noticed it's an active answer, however Flexbox would be the correct approach now.
Live Demo
Vertical and horizontal alignment.
#wrapper {
display: flex;
align-items: center;
justify-content: center;
}
Just horizontal (as long as the main flex axis is horizontal which is default)
#wrapper {
display: flex;
justify-content: center;
}
Original Answer using a fixed width and no flexbox
If the original poster wants vertical and center alignment its quite easy for fixed width and height of the button, try the following
Live Demo
CSS
button{
height:20px;
width:100px;
margin: -20px -50px;
position:relative;
top:50%;
left:50%;
}
for just horizontal alignment use either
button{
margin: 0 auto;
}
or
div{
text-align:center;
}
You could just make:
<div style="text-align: center; border: 1px solid">
<input type="button" value="button">
</div>
Or you could do it like this instead:
<div style="border: 1px solid">
<input type="button" value="button" style="display: block; margin: 0 auto;">
</div>
The first one will center align everything inside the div. The other one will center align just the button.
et voila:
button {
width: 100px; // whatever your button's width
margin: 0 auto; // auto left/right margins
display: block;
}
Update: If OP is looking for horizontal and vertical centre, this answer will do it for a fixed width/height element.
With the limited detail provided, I will assume the most simple situation and say you can use text-align: center:
http://jsfiddle.net/pMxty/
Margin: 0 auto; is the correct answer for horizontal centering only.
For centering both ways something like this will work, using jquery:
var cenBtn = function() {
var W = $(window).width();
var H = $(window).height();
var BtnW = insert button width;
var BtnH = insert button height;
var LeftOff = (W / 2) - (BtnW / 2);
var TopOff = (H / 2) - (BtnH /2);
$("#buttonID").css({left: LeftOff, top: TopOff});
};
$(window).bind("load, resize", cenBtn);
Update ... five years later, one could use flexbox on the parent DIV element to easily center the button both horizontally and vertically.
Including all browser prefixes, for best support
div {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align : center;
-moz-box-align : center;
-ms-flex-align : center;
-webkit-align-items : center;
align-items : center ;
justify-content : center;
-webkit-justify-content : center;
-webkit-box-pack : center;
-moz-box-pack : center;
-ms-flex-pack : center;
}
#container {
position: relative;
margin: 20px;
background: red;
height: 300px;
width: 400px;
}
#container div {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
<!-- using a container to make the 100% width and height mean something -->
<div id="container">
<div style="width:100%; height:100%">
<button type="button">hello</button>
</div>
</div>
Using flexbox
.Center {
display: flex;
align-items: center;
justify-content: center;
}
And then adding the class to your button.
<button class="Center">Demo</button>
You should take it simple here you go :
first you have the initial position of your text or button :
<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2> Simple Text </h2>
<div>
<button> Simple Button </button>
</div>
</div>
By adding this css code line to the h2 tag or to the div tag that holds the button tag
style:" text-align:center; "
Finaly The result code will be :
<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2 style="text-align:center;"> Simple Text </h2> <!-- <<--- here the changes -->
<div style="text-align:center"> <!-- <<--- here the changes -->
<button> Simple Button </button>
</div>
</div>
To center a <button type = "button"> both vertically and horizontally within a <div> which width is computed dynamically like in your case, this is what to do:
Set text-align: center; to the wrapping <div>: this will center the button whenever you resize the <div> (or rather the window)
For the vertical alignment, you will need to set margin: valuepx; for the button. This is the rule on how to calculate valuepx:
valuepx = (wrappingDIVheight - buttonHeight)/2
Here is a JS Bin demo.
Came across this and thought I'd leave the solution I used as well, which utilizes line-height and text-align: center to do both vertical and horizontal centering:
Click here for working JSFiddle
Super simple answer that will apply to most cases is to just make set the margin to 0 auto and set the display to block. You can see how I centered my button in my demo on CodePen
Supposing div is #div and button is #button:
#div {
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: center;
}
#button {}
Then nest the button into div as usual.
Easiest thing is input it as a "div" give it a "margin:0 auto " but if you want it to be centered u need to give it a width
Div{
Margin: 0 auto ;
Width: 100px ;
}
Responsive CSS option to center a button vertically and horizontally without being concerned with parent element size (using data attribute hooks for clarity and separation concerns):
HTML
<div data-element="card">
<div data-container="button"><button>CTA...</button></div>
</div>
CSS
[data-container="button"] {
position: absolute;
top: 50%;
text-align: center;
width: 100%;
}
Fiddle: https://jsfiddle.net/crrollyson/zebo1z8f/
Responsive way to center your button in a div:
<div
style="display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;">
<button type="button" style="height: 10%; width: 20%;">hello</button>
</div>
div {
text-align : center;
}
button {
width: 50%;
margin: 1rem auto;
}
<div style="width:100%; height:100%; border: 1px solid">
<button type="button">hello</button>
</div>
This is what I mostly do.
I think bootstrap also uses this in "mx-auto".
var element = document.getElementById('btn1');
var elementwidth = element.clientWidth;
var elementheight = element.clientHeight;
element.style.left = 'calc(50% - ('+elementwidth+'px / 2) )';
element.style.top = 'calc(50% - ('+elementheight+'px / 2) )';
#btn1{
position: relative;
}
div{
height:200px;
width:200px;
border: 1px solid black;
}
<html>
<body>
<div>
<input type = 'button' id = 'btn1'>
</div>
</body>
</html>
I've been trying to get these objects to center and when I used an <a href> tag, I could see that I was able to click way away from the picture and still the link would activate. I am assuming this means that the child containers are taking up 50% of the width each, despite only a tiny portion of the container being full. Why is there blank space that is preventing me from aligning my objects?
RELEVANT HTML:
<div class="container">
<div class="previous">
<img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
<p>Previous Project </p>
</div>
<div class="next">
<img class="containerimg" src="https://i.imgur.com/s11MTLc.png">
<p> Next Project</p>
</div>
</div>
RELEVANT CSS:
.container {
display: flex;
justify-content: center;
}
.containerimg {
width: 30%;
height: auto;
}
.next {
display: flex;
flex-direction: column;
}
.previous{
display: flex;
flex-direction: column;
}
CODEPEN: https://codepen.io/daniel-albano/pen/zYGKZEw?editors=1100
Your question is a little vague, but I'm assuming that you want to center the .previous and .next divs.
Since both of these are using display: flex already, you simply need to add align-items: center to the .previous and .next classes to make them center horizontally. If you also want the content (the image and text) to center vertically, you'll need to add justify-content: center. Here's the result:
.next {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.previous {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
If you're trying to make the images in those divs take up more space, you'll need to increase the width rule below. Since you commented that you need 100%, you'll need to change it to this:
.containerimg {
width: 100%;
height: auto;
}
I found the issue, I needed my images to contain 100% of the space and I needed to assign a width element to the child containers.
.container {
display: flex;
justify-content: center;
width:100vw;
}
.previous, .next{
width:30%;
display:flex;
flex-direction:column;
align-items:center;
}
img{
width:100%;
}
<div class="container">
<div class="previous">
<img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
<p>caption 1</p>
</div>
<div class="next">
<img class="containerimg" src="https://i.imgur.com/s11MTLc.png">
<p>caption 2</p>
</div>
</div>
You should be able to solve this issue by adding "align-items: center" to your .next and .previous classes. The reason for this is that when you switch the flex-direction to column that also switches how align-items and justify-content work, essentially reversing them.
.next {
display: flex;
flex-direction: column;
align-items: center;
}
.previous{
display: flex;
flex-direction: column;
align-items: center;
}
I'm trying to use flexbox (justify-content: space-between;) to push the Motorola logo to the left and the red block (nav-bar) to the right. It actually works pretty well as long as there is no anchor tag involved. However, I need anchor tags so that visitors can actually click on each item of the nav-bar and get to the respective section of the website.
How can I make justify-content work without removing the anchor tags?
HTML
<div id="header">
<img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/2/22/Motorola_Logo_White.png" alt="This is Motorolas Logo">
<div id="nav-bar">
<div id="nav1" class="nav-link"><a href="#prices">Prices</div>
<div id="nav2" class="nav-link"><a href="#prices">Specs</div>
<div id="nav3" class="nav-link"><a href="#prices">Reviews</div>
</div>
</div>
CSS
#header {
background-color: gray;
position: fixed;
justify-content: space-between;
z-index: 1;
display: flex;
width: 100%;
height: 4rem;
}
#header-img {
background-color: orange;
height: 4rem;
width: 25%;
display: flex;
align-items: center;
justify-content: center;
}
#nav-bar {
background-color: red;
width: 25%;
height: 4rem;
display: flex;
justify-content: space-around;
align-items: center;
}
Here you can see it on Codepen
In cases where you have a flex container with left-aligned content - except one or more items you want to right-align, there is a shortcut using the margin property.
If you add the following rule to your existing styles:
#nav-bar {
margin-left: auto; /* Pushes the element right inside a flex container */
}
It should work as you want. You could even remove the justify-content: space-between; rule from your #header selector.