i'm trying to center a button in my woocommerce website but without sucess.
Heres what i already tried:
margin: auto;
float: none;
display: block;
display: flex;
align-items: center;
justify-content: center;
I made it work without flexbox but isnt responsive and i need to learn more flexbox.
This is the result using flexbox:
Can someone help? if needed, this is the website: http://svidro.recifeimage.com/
-you should have one <div> and inside it your <button>
-<div> should have this style
display: flex;
justify-content: center;
-this is because the content of tag that has
justify-content: center;
will center only it's content
- in this case you will have <div> and it's content is <button>
You could try using relative positioning combined with CSS transforms instead of flexbox to center the button:
position: relative;
/* moves button to the middle of its container */
left: 50%;
/* moves button 50% of its width to the left */
transform: translateX(-50%);
Related
I am building a website from an image given to me to practice (it comes from his employer as a test). I know he mainly used flexbox in the entire site, so im trying to stick with that (havent learned grid at all). On the top of the website is a sort of 'header' that includes some button links, a logo, and a search bar in the middle. The searchbar is located vertically about halfway down the entire header.
I am trying to do that without using a margin hack, but none of the typical align or justify commands seem to work. I also set a height, still nothing. Any thoughts?
Included a height property, also tried various commands like: align-item, align-items, align-self, justify-content, etc.
#searchbar {
height: 100px;
width: 15rem;
flex: 1;
/* margin-top: 15px; */
margin-right: -5px;
text-align: center;
}
I want to move the search bar down to the middle of its parent element, but nothing seems to work.
You need to apply align-self: center to the #searchbar - asyou can see - the display: flex is applied to the parent, then align-self to the div. This centeres it withing the parent. Then you will need to apply that same logic to the contents of the searchbar div itself - in order to center them within it. and adding justify-content: center to center the content horizontally within the parent div as well.
I have applied a yellow background on the parent div, a red border on the searchbar div to demonstrate the relationship and the centering of the inner div and a blue border on the text withon the searchbar div to show its centered..
#wrapper {
height : 200px;
display: flex;
background: yellow
}
#searchbar {
height: 100px;
width: 15rem;
flex: 1;
text-align: center;
align-self: center;
border: solid 1px red;
display: flex;
align-items: center;
justify-content: center
}
#searchbar-content {
border: solid 1px blue;
}
<div id="wrapper">
<div id="searchbar">
<span id="searchbar-content">Search bar content goes here</span>
</div>
I'm trying to center an image horizontally inside of a div that has a width of 100%. Currently I have two images on either side that will act as buttons that have a float: left; and float: right; property.
All of the solutions I have tried have said to make the image display: block but that won't allow me to have the buttons on either side.
Here is the Codepen Example of my current code. I'm trying to center the image that has the class mainimg within the div with the class main.
Any ideas of how I would center that image?
Use flexbox and change your CSS rule for .main like this:
.main {
display: flex;
justify-content: space-between;
background: black;
height: 550px;
}
display: flex; will distribute the three items across the width, justify-content: space-between; will make sure the outer items remain at the outside positions.
http://codepen.io/anon/pen/kkjjJa
I'm trying to Vertical centering picture on my page
i tried few scripts & styles but none of them worked
my page is:
TEST.esc.bugs3.com
I'm trying to Center the "Arrow" pic on the left & right sides to the center of the main pic
today all i get is the pic is always on the "TOP" of the DIV & i wish to put in in center
Note: I don't wanna use fix size as PX i wish to make it with 50%
like main pic is the 100% height and the arrow will be show on 50% of it
Layout - how i wish it will look like
thanks for the help :)
Edit:
thanks for the answers
but i need the side div (side box) to be Vertical centered to the main div (center box)
the main pic size is not fixed (every media will have different size - so i cant use PX as position
Use CSS3 Flexbox for modern Browsers: Here's Browser support for it.
.center-both{
display: flex;
justify-content: center;
align-items: center;
height: 350px;
background: LightSeaGreen;
}
Fiddle
Read this article for more on flexbox: http://dipaksblogonline.blogspot.in/2014/05/css-flexbox-explained-with-examples.html
If you want to support old browsers like IE7/IE8 then use display: table-cell; property to place the content vertically center.
Change the css for Sidepanel class as below
.SidePanel {
width: 5%;
height: auto;
float: left;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
Use This Code For Your Pic:
.pic{
position: absolute;
top: 50%;
margin-top: -(HEIGHT/2)
}
Which HEIGHT is Your Picture's height in Pixels.
Update 1
Your Container Should Have A Specific Height And Have A CSS Property: Position: (Relative|Absolute|Fixed)
If I'm going to center an element in the middle of the screen with flexbox, is the following approach the most elegant?
HTML
<div class='btn'></div>
CSS
body{
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
display: flex;
}
.btn{
width: 10rem;
height: 10rem;
background-color: #033649;
margin: auto;
}
It seems that I have to use position: absolute and height+weight 100% to achieve this.
You have to use position: absolute because the default for an element is position: relative, and in this case, there is nothing to be relative to because you have made the flex container the body.
Your code will work fine, but there is a command to center objects in the actual flex model itself like so:
body{
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center; /*centers items on the line (the x-axis by default)*/
align-items: center; /*centers items on the cross-axis (y by default)*/
}
If you do this you can remove the margin: auto from your .btn class to perhaps give some more wiggle room in your code.
Here is a good resource for all things flexbox.
You can position an element inside a container by using place-items without the need to add any CSS property to that element. In this case I'm using the body of document as the container.
Snippet
body{
margin:0;
height:100vh; /* use 100% of the height of the viewport */
display:grid;
place-items: center;
}
<body>
<button>I'm a lonely button :B</button>
</body>
About place-items
The CSS place-items shorthand property allows you to align items along
both the block and inline directions at once (i.e. the align-items and
justify-items properties) in a relevant layout system such as Grid or
Flexbox. If the second value is not set, the first value is also used
for it.
Find more info here
From start i search for long time solutions and similar questions on stackoverflow, but no one works for me.
Here is a jsFiddle: http://jsfiddle.net/ruudy/MJe3H/
I want to center material-container verticaly, it works only horizontaly.
I tried different solutions like:
top: 0px;
bottom: 0px;
margin: auto;
display: -moz-box;
-moz-box-align: center;
display: -webkit-box;
-webkit-box-align: center;
display: box;
box-align: center;
display: table-cell;
vertical-align: center;
I try to see if a parent div make the vertical center not work but dont find any clue.
Thanks in advance.
PD: Must be a simple thing but i dont find it.
Have a look at this site on vertical center objects, it has been very useful for me.
vertical-centering-with-css
You can align a container vertical only when it has a known height with a CSS trick.
Set the container absolute with a top position of 50% and then add a negative margin of the half size from the container.
.parent_container {
position: relative;
}
.container {
height: 500px;
position: absolute;
top: 50%;
margin-top: -250px;
}
Try using the css-tables technique to vertically center.
See this LIVE DEMO
More about the the different techniques in this post.