This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Missalignment with inline-block (other elements pushed down)
(2 answers)
CSS inline-block issue - element being pushed down [duplicate]
(3 answers)
Closed 3 months ago.
I am participating in a CSS class on Udemy. Unfortunately I got no answers on thier internal discord site, so I am trying here.
This is a question about the display of some elements. What I don't understand is that first div element is moving down on the page, because I wrote the text "Hey you" in it. It shouldn't move down in my opinion, it should stay on the top of the page inline with the other two elements.
Here is the html and CSS:
div {
height: 200px;
width: 200px;
background-color: olivedrab;
border: 5px solid black;
display: inline-block;
margin: 50px;
}
<div>Hey you</div>
<div></div>
<div></div>
First div moving down
I have tried to give the first div an id:
<div id="first_div">Hey you</div>
And give that id a position of absolute:
#first_div {
position: absolute;
}
But it doesn't really work since the absolute value of the position property removes the element from the document flow, and thereby places it on top of the second element, so only two out of the three divs is showing, so no fix really!
Divs are now incorrectly stacked
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
Example:
https://codepen.io/229075284/pen/aboQVXZ
.outer{
background-color: pink;
}
.outer::after{
content:'';
background-color: red;
display: inline-block;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 0;
/* display: table; */
}
.inner{
background-color: blue;
height: 300px;
}
<div class="outer">
<div class="inner"></div>
</div>
When I set display of outer::after to inline-block,the outer will have some extra space marked as pink, even if set font-size and line-height to 0. However, when I set display to table,the extra space disappears.
So I am wondering why the extra space appears?
I checked your codepen. It is a combination of both display: inline-block and content: "" on the ::after pseudo element. You are basically telling the browser that right after the outer element you want to reserve an element's place in the DOM.
You could see that if you remove the content: "" although you are using inline-block the extra pseudo div after the .outer element would disappear. That is because although you stated a certain display mode you practically have no content in this element and the browser ignores your element because it has no fixed size in pixels and no actual content within it.
The reason .outer is growing is that its height is set to auto in default, if you would give it a fixed height in pixels it might not show the spare div.
Your question has nothing to do with line-height or `overflow'.
Me personally I prefer not to use pseudo-classes like ::after and ::before in production. I prefer using regular divs and have my code more readable and understandable by other developers, anyway I hope I helped out. Feel free to discuss further if you have more questions.
This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(9 answers)
Closed 4 years ago.
I'm using a column wrap layout, and the page is going to load new content and append them as new children elements to the parent box element, so I hope the box width auto fit to the children elements.
Codes here: https://codepen.io/mashirozx/pen/exgRqV
What it looks now:
My hope (Notice the overflow-x bar):
Problem solved:
Adding overflow: auto to the flex box.
Try to change:
flex-container-content > div {
background-color: #EB213C;
width: auto;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;`
This question already has answers here:
How to align entire html body to the center?
(11 answers)
Closed 6 years ago.
How to center all the HTML elements horizontally and vertically between the <body> </body> without updating the elements left: and top: property when the window gets resised.
.center { margin: auto auto 3px 3px; }
By using this in your internal or external CSS file all the text elements will be center aligned and there will be a margin of 3 pixels above and below the division.
This question already has answers here:
Floated element gets outside of its parent?
(5 answers)
Closed 6 years ago.
The li height is not defined and it automatically changes with the content. However, it only changes with the right hand side of its content rather than the left. Have changed the left side to block but it does not work. The link is as follows:
[http://ec2-52-32-145-125.us-west-2.compute.amazonaws.com/#/posts][1]
Add this to your CSS:
.posts li {
overflow: auto;
}
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 7 years ago.
Im trying to center a (pumpkinvector.jpg) image inside a .div using this classic trick:
.pumpkin{
position: relative;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
It seems to work fine on the very bottom div where background is red.
However, that was just a test, it is not were I need the image to center.
I need to center pumpkinvector.jpg image up top in "grid2" div that inside "grid 6 october" div. October div has additional code and inner class to give background image and make it resize proportionally in height and width %. Using the same centering code above, the pumpkinvector.jpg now flows to the next line and starts to position outside of the .october div. Can someone why this is?
Please bear with me here. I thought the addition of images helps you visualize my problem so I uploaded to my own site instead of js.fiddle.
Here is the link:
http://jingsportfolio.com/october.html
Please view source to view code. Thanks.
This question is different because it asks how to center div in the context that its parent div has complex markup that makes any traditional centering off and throws in on a new line below parent div.
Check this little example probably will be useful, how to center a image inside a div
The html code:
<div class="parent">
<img src="http://45reu03dndd711szsx3satxn.wpengine.netdna-cdn.com/wp-content//uploads/2015/08/Top-10-best-CSS-development-tools-2015.png"/>
</div>
The css code:
.parent {
text-align: center;
width: 100%;
border: 1px solid #ccc;
}
img .picture {
width: 40px;
height: 40px;
}
This code is running here
Horizontal alignment is really easy with CSS:
the item you want to align has to have "margin: auto"
And the item wrapping has to have a fixed width.
Vertical alignment is a little more tricky:
This trick only works if your wrapper has a fixed height and your content to align is a textual tag like span or p or h1
use the line-height css attribute of the wrapper andset its value to its own height and it's done.
OR
if your content to align has a height of 300px use margin-top: calc(50% - 150px)
change 'margin-top' for absolute "position" and "top" attribute if needed