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
Related
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 1 year ago.
I am having trouble understanding the default behavior of display: flex
Why does my header vertically centers its children when I only add display: flex to it.
I have not added align-items: center; to the header.
Is it because I assigned it height: 100px;?
header {
display: flex;
border: 1px solid black;
height: 100px;
}
header div {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1224px;
margin: 0 auto;
}
nav a:not(:last-child) {
margin-right: 55px;
}
<header>
<div>
Link
<nav>
one
two
three
</nav>
Link
</div>
</header>
I am aware that the div has display: flex and align-items: center; But why does the parent html element header also need display: flex for its children to vertically center?
When you apply display: flex to the parent div, its children "stretch" to assume the full height and width of the container, since the default align-items property is stretch.
Hence, the child of the header now has a height of 100px (previously the height of its content), and the content is centered.
Your solution (to apply height: 100%) works since the content's height is now 100px (the height of the container), essentially simulating flexbox's vertical stretch.
It is not aligning vertically the header, it is aligning vertically the div inside the header.
Your header > div has display:flex and align-items: center which is explicit telling the div to align items to the center.
You don't need display: flex; on parents with only one child.
Your <header> tag has 100px of height and by default your <div> has implicit align-self: stretch; which is like you do height: 100% on it. For solving your problem you have two options:
Remove display: flex; from your <header> tag.
Asign align-self: flex-start; to your <div>.
Apply these two options to the <div> children for achieve the same results if you consider. The main key of this answer is: All children of a flex container has an implicit align-self: stretch by default.
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 have two div elements which I want to center within an 'li' element. I found out that this could be done by using a flex layout. My parent div has the following properties:
display: -webkit-flex;
justify-content: center;
align-items: center;
This works and the two child divs are centering within the 'li'. Those are an image and a text element. But the additional behaviour this has, is not what I want. When the screen is too small for one line text, it is overriding the image. It looks like the following:
The more I shrink the page, the more the image dissappears. Does anybody know how this comes and how I can fix it?
EDIT Currently I am finding out how to add a working code snippet. For now, I have an image with the content structure, maybe this helps a bit.
I fill the image using the following css code:
.img_info_icon_png {
background: url("adapter-images.png") no-repeat -432px -0px;
width: 24px;
height: 24px;
}
Although the width is set to '24px', it is changing within the browser.
EDIT The following url is pointing to an example with the same behaviour: https://jsfiddle.net/Lkpxhux0/
As the flex-shrink defaults to 1, it allows for the items to shrink when not fit its parent.
Add flex-shrink: 0 to the .img_info_icon_png rule.
.outer {
display: flex;
justify-content: center;
align-items: center;
}
.outer .image {
background: url(http://placehold.it/50/f00) no-repeat;
width: 24px;
height: 24px;
flex-shrink: 0;
}
<div class="outer">
<div class="image"></div>
<div class="text">
This is some text that should not overlap the left aligned image
</div>
</div>
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)
I have a div that is display: flex with an unknown number of flex items. I want to use justify-content: space-between, but the problem is that when there is one item, it goes to the left side, whereas I want it to go to the center. Is there a CSS only solution to this?
#container {
display: flex;
justify-content: space-between;
}
<div id="container">
<div class='flex-item'></div>
...n flex-items...
</div>
Then I put some block elements in there (class-name - .flex-items) and due to justify-content: space-between, it makes the space go between the divs evenly so that the left-most div touches the left border and the right-most div touches the right border. It's responsive. My problem is that the default behavior when there is only one flex-item is that it is left aligned but I want it to be center aligned. What is a purely CSS solution?
Here's how you do it:
#container {
display: flex;
justify-content: space-between;
}
.flexItem:nth-child(1):nth-last-child(1) {
margin: 0 auto;
}