I have a div with width: 400px and height: 300px
Inside the div I will insert some Text which should be aligned horizontaly and verticaly.
if the text inside the div is bigger than the div, it should show the scrollbars. Here is a picture which shows what i mean:
The following works in webkit & geko & IE8 upwards. Try some of these techniques for vertical centering if you need legacy IE compatibility: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ OR Vertically and Horizontally Center Image inside a Div, if you don't know Image's Size?
<div style="height:300px; overflow-y:auto; border:solid 1px #CCC; width:400px;">
<div style="display:table-cell; vertical-align:middle; height:300px; text-align:center; width:400px;">
test
</div>
</div>
you might want to use on div as a container and then put your text in another div
you might also want to check out jscrollpane
div.container {
overflow: auto;
text-align: center;
}
<div class="container">
<p align="center">
<h2>Heading 1</h1>
<h2>Heading 2</h2>
</p>
</div>
Also try to set a fixed height for your container so you can get the scroll bars
div.container {
max-height: 200px
}
The post by cronoklee works good too u might want to combine the two methods to get exactly what you want
Related
I'm new to writing HTML and CSS, but I am on the final step of creating my website. Namely, the image slider which resides in the background.
The Issue: The pictures are not centered respective to the viewport.
The first image, for example, should have some padding on the left and
should be vertically aligned so as not to move when the height of the
image increases to match the viewport height. It should remain
centered behind the body of the page.
New Issue: When the first image's width expands over the viewport's, the images begin to move off-center because they are being locked at the left-hand side of the parent class/viewport. Is there a property that will allow the child class elements to expand past the parent's boundaries?
Could some of you wise web devs help me out here?
CodePen full version of the website: CodePen Link
Please go to "Full View", minimize your browser, and shorten its width to see what I mean.
Here is my HTML code for the slider:
<!-- Inside <html></html> and below <head></head> -->
<div class="background_carousel">
<div class="carousel_slides">
<div class="slide">
<img src="./img/slideshow/s%20(1).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(2).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(3).jpg">
</div>
</div>
</div>
and my CSS for the slider...
.carousel_slides {
display: flex;
background-color: #999999;
width: max-content;
text-align: center;
}
.carousel_slides .slide {
position: static;
height: 100vh;
width: 100vw;
}
.slide img{
height: 100%;
}
Huge thank you in advance.
Use position and dynamic adjust left with click
Three divs each above the other, within a parent container. Top div is fixed height. Bottom div has content that takes up an unknown amount of vertical space but needs all content within it to display. Top div should fill remaining vertical space. Every
<div id="container"> // 100% of visible window height but should not overflow
<div id="top"> // Fixed height
</div>
<div id="middle"> // Use remaining vertical space
</div>
<div id="bottom"> // Unknown height but contents should all be shown
</div>
</div>
I need to support recent-ish legacy browsers (e.g. IE9+) & mobile browsers (e.g. Android 4.4+), so flexbox based layouts are out. I tried Javascript (using JQuery) to try and set
middle div height = container height - (top div height + bottom div height)
but for some reason the browser was mis-reporting the bottom div height during page render (latest Chrome on Win 7) so result came out wrong. And I'd like to avoid JS if possible (tho am open if a solution works).
Need to support as many desktop and mobile browsers as possible.
Thanks
For old browser , where flex cannot be used , display:tablecan be a fall back but layout will be able to grow past window's height where content is too long to be shown at once.
A CSS only mix using flex and table as a fallback where flex is not supported: https://codepen.io/gc-nomade/pen/BdWXpp
Below, snippet with display:table/table-row CSS only (which works for almost any browser (IE8 and next)
html,
body,
#container {
height: 100%;
width: 100%;
margin: 0;
display: table;
background: turquoise;
}
#container>div {
display: table-row;
}
.buffer {
display: table-cell;
/* display is optionnal but element is required in HTML to keep layout as a single column and allow vertical-align to content*/
vertical-align: middle;
text-align: center;
}
#top {
background: orange;
height: 100px;
}
#middle {
height: 100%;
}
#bottom {
background: tomato;
}
<div id="container">
<div id="top">
<div class="buffer">top 100px, test me full page and in any medias
</div>
</div>
<div id="middle">
<div class="buffer">Use remaining vertical space
</div>
</div>
<div id="bottom">
<div class="buffer">Unknown height<br/> that fits <br/>to content to hold
</div>
</div>
</div>
boilerplate html/css/etc.
then
<div>
<div style="margin:0 auto; position:relative">
<div data-item data-ng-repeat="item in ItemCtrl.item"></div>
</div>
</div>
... the above uses an Angular template, which is incredibly simple. It just positions absolutely my content into one, two, or three columns. If I set the screen to two columns I'd like it to be centered. I'm able to do this via code, but I wanted a more fluid feel and I suspect CSS can do this, but I'm having trouble w/it.
Here's my template:
<div style="width:400px">
Content here ...
</div>
My Angular directive simply grabs the element above and changes its CSS position property to absolute and gives it a top and left property.
Why is this not working? Can this be done?
So in essence if I have one column, which is 400px and is put in my display at position 0, which would occur in this case, and the screen is at 1400px, I'd like the containing div to be displayed at x position (1400-400)/2.
If I have two columns, which are 400px and are put on my display at positions 0 and 410, which would also occur in this case, and the screen is at 1400px, I'd like the containing div to be displayed at x position (1400-810)/2.
UPDATE:
Here's a fiddle http://jsfiddle.net/0LLa1rs4/
UPDATE:
Here's a solution, although I'm not sure it's the most elegant. Any suggestions to make it better are welcome.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color:blue; position:relative; width:100%; margin:20px auto;">
testing ...
<div style="position:absolute; width:400px; left:50%; margin-left:-200px">
<div style="top:100px; left:0px; width:400px; background-color:green; position:absolute">
Item #1
</div>
<div style="top:200px; left:0px; width:400px; background-color:green; position:absolute">
Item #2
</div>
</div>
</div>
</body>
</html>
Well I'm not sure what you're trying to achieve, you jsfiddle is not very clear. Do you want the number of columns to be dynamic or you choose it? I've made a jsfiddle that could answer the issue but I'm not sure:
http://jsfiddle.net/0LLa1rs4/1/
Basically you should play with
display: flex;
And on the child element
margin: auto;
From your fiddle, it looks like you're trying to center elements horizontally within a container. Your description camouflages this.
Here's a simple fiddle that does similar things to the fiddle you posted, but in a much more concise way: http://jsfiddle.net/gunderson/5eLx4r4p/1/
HTML
<div class="container">
<div class="item">Item 0</div>
<div class="item">Item 1</div>
</div>
CSS
.container{
margin: 20px;
width: 100%;
}
.item{
width: 400px;
margin: 20px auto; /* margin (horizontal) auto is what does the centering, as long as width is defined */
background: green;
}
I have 3 div boxes (with fixed width and dynamic height) that are set next to each other. This works fine in Chrome. But in Mozilla and IE, the boxes don't stay same, they break down themselves and sits on top of each other, what I definitely don't want to happen. Even if I minimize the window size (it happens with all browsers) the boxes break down and don't stay in the same row. I want to get rid of this problem. I want that whatever size the window have or what ever browser is used, the boxes shouldn't break down. They must still be able to fit next to each other.
See here
[NOTE/SIDE INFO: I have set the width of my each box 253 px because the max-width of my bosy is set as 1200px, and 253px is estimated so that they all can fit inside 1200px]
This piece of code I am working on:
.HTML:
<div class="box">box1box1box1box1box1<br>
</div>
<div class="box">Box2Box2Box2Box2Box2<br>
</div>
<div class="box">box3box3box3box3box3<br>
</div>
.CSS:
.box {
display:inline-block;
margin-top:100px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
margin-bottom:60px;
margin-left:70px;
padding:15px;
width:253px;
border: 4px solid gray;
border-radius:5px;
}
All you need to do is to put your content in a block-level container element with a width that's wide enough for the elements to not wrap to the next line:
http://jsfiddle.net/o8r97fhf/
HTML:
<div class="container">
<div class="box">box1box1box1box1box1<br /></div>
<div class="box">Box2Box2Box2Box2Box2<br /></div>
<div class="box">box3box3box3box3box3<br /></div>
</div>
CSS:
.container {
width:1161px;
}
.box {
display:inline-block;
margin-top:100px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
margin-bottom:60px;
margin-left:70px;
padding:15px;
width:253px;
border: 4px solid gray;
border-radius:5px;
}
The reason why it is doing this is because the <div class="box" /> elements have "display:inline-block;" - making them act more like an element such as <img /> where it has a height and width, but it is displayed inline, and if there's not enough room on one line, the elements will wrap to the next line.
Another thing you can try with the container <div /> element is to put "white-space: nowrap;" on it instead of specifying a particular width on it.
One thing I do when I'm messing around with CSS like this is, I will put a temporary "background-color:#F0F;" on the container <div /> element so I can see exactly what the dimensions look like, and what is really going on in the page.
I inserted a .swf file to my page inside a div, and I tried to make it vertically aligned to the middle of this div, but it didn't work, only horizontally but that's not what I want.
I tried to place this file in another div inside the main div and change the alignment of this div as well.
Any suggestions?
Here is a good way I use to center elements horizontally and vertically:
<div style="position:fixed; top:0; left:0; width:100%; height:100%;">
<div style="height:100%; display:table; margin:0 auto;">
<div style="vertical-align:middle; display:table-cell;">
<div><p>This is a fully-centered div!</p></div>
</div>
</div>
</div>
Hmm... its kinda hard to answer without a code snippet.
Here is an article for creating wrappers around Flash content: http://livedocs.adobe.com/flex/3/html/help.html?content=wrapper_13.html
Scroll down to the table, where they start talking about "align" or just do a page search for the word "align" to see what they have to say.
Here is also a quick idea, I have noooo idea whether or not it works, just food for thought:
div.SWFContainer object, div.SWFContainer embed {
display: inline-block;
margin: auto 0px auto 0px;
width: auto;
vertical-align: middle;
}