This question already has answers here:
Create a slanted edge to a div [duplicate]
(5 answers)
Closed 3 years ago.
Let's say I have a container div with two divs inside. This is the effect I want to get:
<div>
<div></div>
<div></div>
</div>
In addition, I need it to be responsive, width and height in % or viewport units. And I need to fill them with various content, some content might even be partially hidden under one of these divs.
Unfortunately CSS is not THAT advanced re: skew affecting child elements... I am sure what you are looking for is that the content will wrap at the angle that you have created there... I agree that the only way is as #user5151179 pointed out, with the 2D transforms... Just check for browser compatibility with this (There's no easy solution for solving this for all and every browser as you would know).
I think the easiest way would be for you to add a background image to the outer div, and have two rectangular divs where you can add content etc. inside the outer div, thus your text not wrapping at an angle, if that makes sense.
Try the following
<div class='container'>
<div class='div div1'>
</div>
<div class='div div2'>
</div>
<style>
.container{
height:50px;
width:100px;
position:relative;
overflow: hidden;
}
.div1 {
background: none repeat scroll 0 0 #0000FF;
left: -8px;
}
.div2 {
background: none repeat scroll 0 0 #000000;
right: -7px;
}
.div{
width: 57px;
top: -10px;
transform: rotate(20deg);
position: absolute;
height: 72px;
}
There is no css method to do it. But we can do it by some css tricks like what i did above.
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
Here's a repro.
Padding off, margins off, I don't see what's causing the space circled below. I'm using normalize, it doesn't matter. I get that the vertical scroll bar changes things, but shouldn't 100% width fix this?
The screenshot is using canvas width, max-width 80% and the right hand is allowed to size by the browser. If I set to 20% it wraps below.
Update: For those too lazy to click the repro link, here's a similar snippet:
.model-div {
background: black;
display: inline-block;
height: 100vh;
max-width: 80%;
width: 80%;
}
.ui-console {
display: inline-block;
height: 100vh;
max-width: 20%;
width: 20%;
}
<body>
<div class="model-div"></div>
<div class="ui-console">
<button class="reset" onclick="model.fReset()">Reset</button>
<button class="blind-mode" onclick="model.fToggleBlind()">Toggle Blind Mode</button>
<div class="log-text-div"></div>
</div>
</body>
Browsers detect ANY amount of whitespace as 1 space, therefore it prints a space between the two items, thus causing the second item to fall. (Unless you use a workaround.)
Possible solutions:
1.Eliminate your whitespace inside your HTML. The easiest way to do this is to use something to minify your HTML, which honestly is a good practice anyway.
2.Set the font-size of your parent to zero
Parent (body, in your example.)
.parent{
font-size:0;
}
Children
.parent>*{
font-size:16px;
}
3.Float the children (Bootstrap does this in v3, before it switched to flexbox.)
.model-div,.ui-console{
float:left;
}
I'm having a bit of a frustrating issue...I thought I found a few answers here but nothing as of yet seems to be working.
Here is an image to start off with:
http://www.shaunmbaer.com/wordpress/wp-content/uploads/2013/02/Melissliss_01.jpg
Then here is the html:
<section class="A">
<aside class="B"></div>
<header class="C">Title</header>
<article class="D">Lorem ipsum...</article>
</section>
And the css as of now:
A{width:100%}
B{width:220px; height:100%; float: right; background= #fff url("foo") repeat}
C{width:450px}
D{width:450px}
I am using wordpress (this bit is a post), so all of the content is automatically generated. I need div "B" to be 100% of the parent div. It does not have any content besides a repeating background image (the site is responsive and this div will disappear at the next breakpoint).
I cannot position them absolute since I cannot give the article ("D") a fixed height (at least I think that statement is correct...)
Can anyone help or point me to somewhere that can? Preferably a CSS solution, but jQuery is a-ok at this point too!
Thanks a ton2.
I'm pretty sure you can use absolute positioning for the B element, and specify 3 sides for the element to stick to:
.A {
position: relative;
}
.B {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 220px;
}
I've created a JSFiddle here:
http://jsfiddle.net/AsHW6/
What I'm attempting to do is get the down_arrow.png's centered in their containing divs. I was able to center the up_arrow.png's using auto margins. I'm using the fixed property to use them as footers, as I want them to be at the bottom of the div regardless of resolution.
My question is what is the best way to center a bottom fixed image within the width of its containing div?
Some code from the fiddle (I'm having trouble with the StackOverflow formatting):
.scroll-arrow-down {
position: fixed;
bottom:0;
}
I should add that I don't care about IE hacks/workarounds at all, this application will not be targeting IE in any way.
Any comments and answers are appreciated.
If you used fixed position it will be fixed to the viewport (which I don't think you want). Using absolute positioning will position the images in reference to the item that contains them.
I added a left:45%; which pretty much centers things, but depending on the width of your arrows that may need to be updated.
.scroll-arrow-down {
position: absolute;
bottom:0;
left: 45%;
}
http://jsfiddle.net/AsHW6/1/
You can wrap the arrow-down images in a div that gets aligned to the bottom. The div can then be set to have its content centered.
Wrapping in HTML:
<div id="list1">
<img src="image/up_arrow.png" class="scroll-arrow-up">
<p class="list-title" id="list-title1">Autonomous Behaviors</p>
<div class=".scroll-arrow-down">
<img src="image/down_arrow.png">
</div>
</div>
and the css:
.scroll-arrow-down {
position: absolute;
bottom: 0;
background-color: red;
width: 100%;
text-align: center;
}
Disclaimer: I don't believe this is a duplicate as I'm using relative sizes to produce a full screen grid layout without using px.
Problem: In this jsFiddle http://jsfiddle.net/X3ZDy/73/ I have four equally proportioned boxes. They are designed to span the screen width and remain square. Contained within them are some sample square DIVs (40% x 40%). I'm struggling though to get a text label lbl horizontally and vertically centered within bbl.
All the examples I've seen (and tried) don't work as they require me to know the height of my label, or they use browser restricted table-layout tricks. I need to do this with all relative sizes as per the fiddle.
Can anyone assist? I need to this to work on ALL browsers with a pure CSS (no JS) solution. I'm astonished that it appears to be quite so tricky to vertically align text in a div. I don't mind if we use block or inline elements as the text label.
Please note that I'm NOT looking for a TABLE solution, this is a DIV & CSS puzzle that requires a working jsFiddle.
More:
Thanks all for your answers, but for future posters, note that (width == padding-bottom) is the magic that allows my DIVs to be square. It's key to a grid-layout system so I need to maintain that.
updated
It's pretty tricky working with relative sizes and no fixed heights, but I think I've finally found an answer to the problem (below).
I think I finally found an answer to the problem that works. The issue is that almost every other solution I've seen can't cope when the child size changes and none of the heights are known. I needed this to work for a responsive all % design where there are no fixed heights anywhere.
I stumbled across this SO answer Align vertically using CSS 3 which was my inspiration.
Firstly, using an all % design, you need a zero height wrapper element to act as a positioning placeholder within the parent element;
<body>
<div class="container">
<div class="divWrapper">
<div class="tx">This text will center align no matter how many lines there are</div>
</div>
</div>
</body>
My Container in this case is a simple box tile;
.container
{
margin:2%;
background-color:#888888;
width:30%;
padding-bottom:30%; /* relative size and position on page */
float: left;
position:relative; /* coord system stop */
top: 0px; /* IE? */
}
So nothing special about that except that it has no height which makes this general problem of centering elements tricky. It needs to be absolutely positioned so that we can uses positioning coordinates in the child elements (I think this may require a 'top' in IE).
Next, the wrapper which is absolutely positioned to exactly overlay the parent element and fill it out completely.
.divWrapper
{
position:absolute;
top:0px;
padding-top:50%; /* center the top of child elements vetically */
padding-bottom:50%;
height:0px;
}
The padding means that any child elements will start in exactly the middle of the parent element but this wrapper itself has no height and takes up no space on the page.
Nothing new yet.
Finally, the child element we want to center. The trick here to this was to have the child element slide up vertically based on it's own height. You can't use 50%, because that's 50% of the parent container not ourself. The deceptively simple answer is to use a transform. I can't believe I didn't spot this before;
.tx
{
position: relative;
background-color: transparent;
text-align: center; /* horizontal centering */
-webkit-transform: translateY(-50%); /* child now centers itself relative to the midline based on own contents */
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod="auto expand")'; /*IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod='auto expand'); /*IE6, IE7*/
transform: translateY(-50%);
}
Here's the Fiddle
However, I haven't tested this on IE6+ so if somebody would like to verify my Matrix transform I'd appreciate it.
Update
It turns out that the wrapper isn't even needed. This is all you need to properly vertically center;
.tx
{
width:100%; // +1 to #RonM
position: absolute;
text-align: center;
padding-top:100%;
-webkit-transform: translateY(-50%); /* child now centers itself relative to the midline based on own contents */
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(Dx=0,Dy=0)'; /*IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(Dx=0,Dy=0); /*IE6, IE7*/
transform: translateY(-50%);
}
And the updated Fiddle
But still not working in IE6 yet - looking at those transforms, I don't think this can be done for that legacy without JavaScript.
The reality is, that the only tags in HTML that have native fluid vertical alignment are the table cells.
CSS does not have anything that would get you what you want. Not today.
If the requirements are:
1. Works with every browser
2. fluid height
3. vertical centering
4. no scripting
5. No TABLEs
6. You want the solution today, not in few years
You are left with 1 option:
1. Drop ONE of your requirements
Otherwise this "puzzle" is not completable. And this is the only complete acceptable answer to your request.
... if only I could get all the salaries for the wasted hours on this particular challenge :)
Don't self-abuse; let IE7 go... :) (According to this, not very many people are using it.)
I gave this a shot with two approaches, one uses display: table and the other uses line-height. Unfortunately, I don't have access to a PC, so they're only tested in Chrome 25.0.1365.1 canary, FF 18, and Safari 6.0 on Mac 10.8.1, iOS 6.0.1 Safari, and iOS Simulator 5.0 and 5.1 Safari.
The display: table approach has issues on iOS Simulator 5.0 and 5.1, the text isn't quite centered, vertically.
According to quirksmode, the display:table method should be compatitible with IE8 and up. Theorectically, the line-height method might be compatible with IE 6/7.
To create the centered box within each square, I set .box6 to position: relative and changed the .bc style to:
.bc {
position:absolute;
top: 30%;
bottom: 30%;
left: 30%;
right: 30%;
overflow: hidden;
}
Each approach creates a very tall container with a static height inside the .bc element. The exact value for the static height is arbitrary, it just needs to be taller than the content it will contain.
The display: table method changes the .bbl and .bbl .lbl styles to:
.bbl {
display: table;
height: 500px;
padding-top: 50%;
margin-top: -250px;
background-color: blanchedalmond;
width: 100%;
}
.bbl .lbl {
display: table-cell;
vertical-align: middle;
text-align:center;
}
For the line-height method, the HTML is:
<div class="bc">
<div id="line-h-outter">
<span id="line-h-inner">a lot more text than in the other blob. The quick brown fox jumped over the lazy dog</span>
</div>
</div>
CSS:
#line-h-outter {
line-height: 500px;
vertical-align: middle;
margin-top: -250px;
padding-top: 50%;
}
#line-h-inner {
display: inline-block;
line-height: normal;
vertical-align: middle;
text-align: center;
width: 100%;
}
http://jsfiddle.net/X3ZDy/93/
The title should be Centering in the Unknown ;-)
I updated your example using tables: http://jsfiddle.net/uWtqY/ and the text is align inside the box you described using tables, but you don't want this.
Added a table with like:
<table width="100%" height="100%"><tr><td>One line</td></tr> </table></div>
inside <div class="lbl">
Just for cross-browser support.
EDIT
After doing some research indeed it is really hard to v-align an element inside percentages.
Tried a lot of stuff but your code I am not sure if it fits the design of all of them. Well what I mean in other words is that you might first need to construct your vertical alignment and then try to play with percentages. From my experience in this field I learned that a good approach is start designing from the inside elements and then go out if complexity increases. So having percentages in everything might not be the best implementation (and it is not when coming to mobile devices).
EDIT 2
After consolidating with several of my work partners and really geeks on the area of HTML the answer was clear. Either you support < IE7 and you do that with a table or ghost elements or spans, either you use all of the tequniques that are described in several posts and you can have support for >=IE7 . Another option is to use specific structure for each browser.
The link that I think explains it as it is and has a nice title (basically is what you need):
-> Centering in the Unknown
Hope the best.
PS. Links for reference:
http://web.archive.org/web/20091017204329/http://www.zann-marketing.com/developer/20050518/vertically-centering-text-using-css.html
http://css-tricks.com/vertically-center-multi-lined-text/
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Let me know if it helps
I updated the css to utilize a "spacer" class. It is placed before your "bc" div and inside the colored boxes. This gave me the effect I think you requested.
html:
<div class="rgCol boxCol box6" style="background-color:lightgray">
<div class="spacer"></div>
<div class="bc">
css
.spacer {width:100%;padding-bottom:30%;display:block; }
I bottom padded the spacer by 30% and then moved the absolute left position of your "bbl" div to 30% (from 2%). The blanchdelemond boxes retain their shape and size.
http://jsfiddle.net/X3ZDy/37/
Today I have stumbled upon similar problem - to both vertically and horizontally center child element of a square divs which have precentually set width (they are made sqare using the padding technique). I had to use it for images while maintaining aspect ratio, but changing the child into any target element would be simple.
For this situation no line-height, margin/padding or display:table-cell workaround is suitable. But there is a solution using margin: auto.
HTML:
<div class="squareContainer>
<div class="contentWrapper">
<img class="imagePreview" alt="Image preview" src="//URL.jpg">
</div>
</div>
CSS:
div.squareContainer {
position: relative;
box-sizing: border-box;
height: 0;
padding-bottom: 25%;
width: 25%;
}
div.contentWrapper {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
img.imagePreview {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto; /* This is the important line */
max-height: 90%;
max-width: 90%;
}
Helpful resources:
http://jsfiddle.net/mBBJM/1/
http://codepen.io/HugoGiraudel/pen/ucKEC
Hope that helps!
You can solve this trivially, without all the weirdness (perhaps someday they'll fix the CSS box model, but till then):
<table>
<tr>
<td width="50" height="50" align="center" valign="middle">text</td>
</tr>
</table>
That's all there is to it. Choose your width and height, drop it in a div and call it good.
The idea of never using tables is a very poor guideline, to the point of being self-abusive.
Do you mean like this?
<div class="mycontainer">
<div class="rgRow">
<div class="rgCol" style="background-color:pink">
<div class="boxCol">BOX1</div>
</div>
<div class="rgCol" style="background-color:lightgray">
<div class="boxCol">
<div class="boxLabel">a lot more text than in the other blob. The quick brown fox jumped over the lazy dog</div>
</div>
</div>
<div class="rgCol" style="background-color:maroon">
<div class="boxCol">
<div class="boxLabel">One liner</div>
</div>
</div>
<div class="rgCol" style="background-color:yellow">
<div class="boxCol">BOX4</div>
</div>
</div>
</div>
.mycontainer
{
background-color: #000000;
display: inline-table;
}
.rgRow
{
width: 100%;
display: table-row;
}
.rgCol
{
width: 25%;
height: 100%;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.boxCol
{
display: inline-block;
width: 100%;
text-align: center;
vertical-align: middle;
}
.boxLabel
{
text-align: center;
vertical-align: middle;
background-color: blanchedalmond;
overflow: hidden;
margin: 2%;
width: 96%;
height: 96%;
}
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 years ago.
when i use top:50% and left:50%
the box is not directly in center. of course when the box is very small, it appears to be centered. but when box is a bit big, it looks as if it's not centered.
how can i resolve this ?
top and left correspond to the top-left corner of your box. What you're trying to do is have them correspond to the center. So if you set margin-top and margin-left to negative of one-half the height and width respectively, you'll get a centered box.
Example for a 300x200 box:
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
using translate will perfectly achieve that. simply apply this
div.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
source
Horizontal: Use a fixed width and
margin-left: auto;
margin-right: auto;
vertical: That's not that easy. You could use
display: table-cell
for the surrounding DIV and then give it a
vertical-align: middle
You can assign the box a fixed width and heigth, and then give it's margin-top and margin-left properties the negative half of the height and width.
EDIT: Example
div.centered {
width: 500px;
height: 400px;
top: 50%;
left: 50%;
position: absolute;
margin-top: -200px;
margin-left: -250px;
}
One way is to assign a specific width to the box, then halve the remaining distance on each (left and right) side. This may be easier if you use percentages instead of pixel widths, e.g.,
<div style="margin-left:25%; margin-right:25%">...</div>
This leaves 50% width for the div box.
The very bizarre CSS "language" does not provide a simple way to center a element in the screen. Kludges must be made! This is the only solution I came to elements that are AUTO in both height and width. Tryed in FF19 (Win+Mac), CH25 (Win+Mac) and IE9.
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#eee; /* aesthetics as you wish */
}
.overlay .vref { /* it is a vertical reference to make vertical-align works */
display:inline-block;
vertical-align:middle; /* this makes the magic */
width:1px;
height:100%;
overflow:hidden;
}
.overlay .message {
display:inline-block;
padding:10px;
border:2px solid #f00; /* aesthetics as you wish */
background-color:#ddd; /* aesthetics as you wish */
vertical-align:middle; /* this makes the magic */
max-width:100%; /* prevent long phrases break the v-alignment */
}
<div class="overlay">
<div class="vref"> </div>
<div class="message">whatever you want goes here</div>
<div class="vref"> </div>
</div>
body { text-align: center; }
#box {
width: 500px; /* or whatever your width is */
margin: 10px auto;
text-align: left;
}
The above would centre your box centrally horizontally on the page with a 10px margin at the top and bottom (obviously that top/bottom margin can be altered to whatever you want). The 'text-align' on the body is required for IE, which as usual doesn't quite get the hang of it otherwise. You then need the left text-align on your box (unless you want text it in centred too) to counteract the text-align center on the body.
Trying to centre vertically is just about impossible using pure CSS though. Though there's a vertical-align in CSS, it doesn't work like the HTML vertical align in tables, so in CSS 2 there's no in-built vertical align like the HTML one. The problem is that you're dealing with an unknown height - even if you know the height of your box, the height of the page is unknown, or rather what are you trying to fix the box in the centre of? The page? The viewport? The visible screen area's going to be different for everyone, depending on their screen resolution, browser, and all of the browsers interpret the height differently.
There are various methods that claim to have solved the problem, but usually they don't reliably work in all browsers. I found this one the other day, which doesn't seem bad, but it doesn't work in Google Chrome (works in Firefox and Opera, but I didn't get chance to check out IE). There's an interesting discussion on the problem though on this thread on Webmaster World that summarises the various methods and pros and cons of them and is well worth a look.
Edit:
Dav's solution in the first response works okay as long as you (or the visitor to the site) don't increase the font size or line height. The container will be centred, but as soon as the font size is increased or more content added, it'll overflow the container.