This question already has answers here:
Centered div and fluid left padding over the container
(2 answers)
Closed 9 years ago.
I have a centered red div (blue) with a max width (1240px) in my layout and I search to make this in CSS. The logo area (purple) from the left of the centering area (blue) is 300px. At the left of this point, in red, it will be fluid (whatever the screen resolution you have).
(btw, that's the same thing for the lightgray div just below)
Do you have an idea to do that?
Here, have a look at this one:
http://css-tricks.com/the-perfect-fluid-width-layout/
Do something like this:
FIDDLE
<div class="container">
<div class="logo">
logo here
</div>
</div>
CSS
.container{
width: 1240px;
background: orange;
text-align: center;
margin: 0 auto;
}
.logo{
width: 180px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
why the layout is messed up?
why the p element is doing this?
why the first div is a little bit closer to the bottom of the page
#pricing div {
display: inline-block;
width: 30%;
height: 200px;
border: solid 2px black;
}
<section id="pricing">
<div id="plan-1m">
<!--try without p -->
<p>why this p messes up the layout?</p>
</div>
<div id="plan-3m">
</div>
<div id="plan-12m">
</div>
</section>
You should add vertical-align: top; to your div element.
The default value is vertical-align: baseline;, and for what I understand from the documentation, it tries to align the bottom of your p with the bottom of other divs (because they don't have any content)
This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
How to center a "position: absolute" element
(31 answers)
Closed 2 years ago.
im trying to put my image on the middle top off my box. I'm sorry if this is a stupid question but I'm new to coding and I'm young. I searched on the code, everything's fine except this part. It makes my image is on like the middle mid, a bit on the left which is not what I want. Thanks
.profile img
{
position: absolute!important;
left:calc(50% - 60%px)!important;
border: 10px solid #fff!important;
}
this is what it gives me
This will also help;
.profile{
position:relative; /* set whatever height and width to this div */
}
.profile img{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border: 10px solid #fff;
}
Try using Flexbox containers. Using justify-content and align-items, you should be able to put your image at the top center of your div without using absolutes. The W3 links show examples of both properties--combine them and you should achieve your desired result.
Using margin:auto (by making img tag as display:block)
div {background: yellow; height: 400px;}
img {border-radius:50%; margin:auto;display:block;}
<div class="wrapper">
<img src="https://picsum.photos/100" />
</div>
Using Flexbox
div {background: yellow; height: 400px; display: flex; justify-content:center;}
img {height: 100px; border-radius: 50%;}
<div class="wrapper">
<img src="https://picsum.photos/100" />
</div>
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
Is it possible to contain/limit the height of an image in a column flexbox? In this fiddle, I would like to make the image be displayed in a reduced size in order to make the title underneath it be just inside the bottom of the flex parent.
Ideally, I would like to do this with a 100% CSS solution.
Here is the fiddle: https://jsfiddle.net/brandoncc/czLjoxdu/4/
The basic CSS code is:
div {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid green;
width: 400px;
height: 300px;
}
Just add a new class
img
{
height:50%;
}
Change the percentage as you like.
try this..
<div>
<img src="http://placehold.it/350x350" / class="img-fluid">
<p>Image title</p>
div {
border: 1px solid green;
width: 400px;
height: 300px;
position:relative
}
You may add the following to keep the image from overflowing and use the max space. You can change the percentage to smaller the image. Just tweak it an see what works best for you.
img {
height: 100%;
}
I am trying to create what is basically a horizontally/row-oriented version of Bootstrap v4's cards using flexbox (flex-direction: row). Instead of having a header, I'd like to have a left column that would contain the card's icon while the right column would contain the text for the card. I have this about 95% complete, except for the fact that when I vertically center the left column, it no longer takes up the entire vertical spacing (see the black areas surrounding the yellow .icon div in the CodePen example below). If I tell the column to stretch itself (change the align-self property of the .icon class to stretch), the column loses its vertical centering.
How can I make the left/yellow/.icon column be vertically centered and cover all vertical space?
The CodePen example has the parent and child divs colored to show the area they are occupying, but in my final product only the .icon div will have a background color. The other two divs (.wrapper and .content) will not have any background color. I prefer to not have to set the vertical height of the card, but if that is the only way to do what I want to accomplish, it won't be a deal breaker.
CodePen.io example
You can inbricate flex boxe to use alignements also in children.
Not too sure of what you look for exactly, but here an example of inbrication and use of flexbox to center things:
wrapper in middle of screen and content icon also in middle
html {
display:flex;
height:100%;/* give an height or min-height to that flex boxe */
}
body {/* single element, easy to middle center */
margin:auto;/* or justify-content+align-items center on html */
}
.wrapper {
background-color: black;
color: white;
display: flex;
flex-flow: row nowrap;
min-height: 100%;
width: 300px
}
.icon {
display:flex;/* flex child can be a flex boxe too */
align-items:center;
background-color: yellow;
color: black;
flex: 1 1 auto;
font-size: 32px;
padding: 20px;
}
.content {
background-color: lightgreen;
color: black;
flex: 12 1 auto;
padding: 20px;
}
h4 {
margin:0 0 10px;
}
/* where is body ? */
body {
box-shadow:0 0 0 5px white, 0 0 0 15px tomato;
}
<div class="wrapper">
<div class="icon">
#
</div>
<div class="content">
<h4>Application #1</h4>
<p>This is an application of flexbox. Tomato color is shadowed from body.</p>
</div>
</div>
pen forked
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 8 years ago.
Curious why the top and bottom margins of 10px are not applied to the inner div in the snippet below. If I set the inner display property to "inline-block" it applies the top/bottom margins as expected.
jsFiddle example
HTML:
<div class="outer">
<div class="inner">
My content...
</div>
</div>
CSS:
.outer {
background-color: lightgrey;
}
.inner {
background-color: green;
padding: 50px;
width: 600px;
margin:10px;
display: block; /* No top, bottom margins applied. Does apply them with "inline-block". Why? */
}
The .inner top margin is collapsing.
An easy fix is to make the outer display:inline-block You should put padding:10px on the outer and no margin on the inner.