I am trying to make a div vertically centered inside a parent div.At the same time I don't want the child div not to be responsive.
Here is the html code
<div class="wrap">
<div style="background: url('http://www.screensavergift.com/wp-content/uploads/GoldenNature2-610x320.jpg') no-repeat; background-position: 25% 50%; background-size: cover;" class="menu_item"></div>
<div class="menu-box-border"></div>
<div class="menu-box-content-box">
<h3>Some Text</h3>
</div>
</div>
I have created a demo here -- http://jsfiddle.net/squidraj/4eewp8x0/7/
As you can see the semi transparent box with overlay is always staying at the bottom and on browser resize the box is also resizing and as a result the overlay box is causing problem to the text.
Any help/suggestion is highly appreciated. Thanks in advance.
First of all, there is a well-known trick to do this, you can read it on https://css-tricks.com/centering-in-the-unknown/
This will give you this: http://jsfiddle.net/4eewp8x0/8/
However, as we have more and more powerful tools of CSS3, I'd like to present some more tricks.
CSS Transform
The essence of this trick is that we absolutely position the child at (50%,50%), and then do a translate of (-50%,-50%)
You will have this: http://jsfiddle.net/4eewp8x0/9/
Flex Layout
At last, people who are filled up with fury toward the difficulties aligning elements come up with flex layout.
You can read about flex layout here:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You will have this: http://jsfiddle.net/4eewp8x0/11/
Related
I'm a beginner when it comes to HTML and CSS and I'm struggling to position some div elements as described in the image intended outcome. I've centered the table with margin-left: auto and margin-right: auto. I want the text div-element to be aligned right above the table. Is there any good way to do that?
Any help is much appreciated.
Put them both in another div that will be centered inside the box
Set the table width and the div width.
<div id="wrapper-div" style="margin:auto; width:XXpx">
<div id="text-div" style=""></div>
<div id="table-div"></div>
</div>
The wrapper div should have the same width as the table div.
There are many ways to do this, as you are trying you can try adding the following css style:
display:inline-block
I need to create a row for a front page (like a slider) with an image where there is a man and behind him is a gradient.
the image is as it is, centered in container (width 1170px) and that works fine but i need to make a row behind the image to go full 100% for larger resolutions. I am using bootstrap 3.
The way I see it, the background 'row' div should have a dark color from left to center, and from center white color should go to the right.
I dont believe a gradient on row should work because of the resizing hm?
I cant find any similar websites that have this.
Is there a better solution?
<div class="row">
<div class="col-md-12">
<div class="container" id="slider">
</div>
</div>
</div>
#slider {
background: url('image.jpg');
height: 550px;
}
For this kind of Design normally we remove left portion if it's not necessary. Otherwise we need to make display block both div left and right.
I have a layout that i need to build as can be seen in the image:
Grey stands for header, and there are no problems there. As for the body, I've split it into 3 divs as follows:
<div class="row">
<div class="col-lg-3">
<p>text positioned right here</p>
</div>
<div class="col-lg-6">
<img src="path/to/image.jpg">
</div>
<div class="col-lg-3">
<p>text positioned right here</p>
</div>
</div>
The problem I have is that I need that text to be vertically centered, and I don't know how. I've tried this solution Twitter Bootstrap 3, vertically center content but it doesn't seem to work for me (maybe I'm doing something wrong). I've tried adding padding-top to fix it, but it messes up the mobile display (as expected).
Please, can anyone help?
Thank you.
Text align property is only for horizontal text align, if you want to make text align vertically you need to use position property, we can make using text align something like that. for example: use center of the screen property.
position:relative;
left:50%; top:50%;
also minus margin property off of the container with.
The simplest way to center vertically is to add display:table to the containing element, and display:table-cell to the element you want centered. Bootstrap has a .text-center class to handle the horizontal centering.
http://www.bootply.com/lTigluKakK
Using your example as template:
<div class="col-xs-3 text-center v-align-container">
<p class="v-align-content">text positioned right here</p>
</div>
<div class="col-xs-6 text-center">
<img src="//placehold.it/400x400">
</div>
<div class="col-xs-3 text-center v-align-container">
<p class="v-align-content">text positioned right here</p>
</div>
CSS:
.v-align-container{display: table;height:400px} /* height set to match img (plus padding if needed) */
.v-align-content{display:table-cell;vertical-align:middle}
This works great if you're able to define the height of the sidebar divs. But, if you need them to match the height of the center element dynamically, you'll need a little more bootstrap magic to tie them together, but this will still apply to centering the content within those sidebars.
have a look at my code.
http://jsfiddle.net/Q8V4H/6/
The text within p element Telephone Dialer is being aligned using top-down approach whereas i want to align it in the center from all positions i,e top right bottom and left. here is the example output my code is producing.
I don't want any space there instead the text Download PC Dialer should be aligned in center of the div i.e from left,right,top,bottom and not just left and right.
here is the example image of what i want to achieve.
if i use text-align:center it will only align the text in center from left and right, not from top and bottom, and in this case i want to align it from top and bottom too. how do i do it?
thank you
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell;text-align:center;vertical-align:middle;padding:8px">
Download PC Dialer
</div>
</div>
<div style="display:table-row">
<div style="display:table-cell;text-align:center">
<img src="download.png">
</div>
</div>
</div>
This will give you the same behaviour as if you had used a table without the semantic issues of actually using a table. Works in all browsers except IE7 and below.
For horziontal alignment, you can use margin: 0 auto; on a fixed div element. For vertical alignment, you can set the line-height to be same as font-size.
Put it in a <div> and then put that in another <div>. The child div should have vertical-align: middle and line-height: Xpx where X is the height of the inner div.
Look here: http://phrogz.net/css/vertical-align/index.html
I want to do this
How to do these with CSS?
Update
How do I align the cylinders on the same bottom, and how do I add the caption below them?
You have to split the cylinder image in three parts: The top, the middle (which will be repeated), and the bottom. Like this:
Call them top.png, middle.png, and bottom.png, for example.
Then you need three HTML elements, one for each part:
<div class="cylinder top"></div>
<div class="cylinder middle" style="height:300px"></div>
<div class="cylinder bottom"></div>
And the css:
.cylinder {
width: <width of the cylinder image>px;
}
.cylinder.top {
background-image:url('top.png') no-repeat;
height: <height of the top image>px;
}
.cylinder.middle {
background-image:url('middle.png') repeat-y; /* repeat vertically */
}
.cylinder.bottom {
background-image:url('bottom.png') no-repeat;
height: <height of the bottom image>px;
}
To change the height or the cylinder, you just have to modify the style="height:300px" on the middle element.
This solution will work in any browser, even IE6.
Here is a list of tutorials for the same
You can build one using a jQuery plugin as well
or you can try Google Chart Api
http://codepen.io/msvbg/pen/Lymko
This is just for fun. In pure CSS3, no JS or images. A better approach would probably be to simply use one of the many charting libraries out there.
Create a bottom image for the rounding.
Create a 1px high image for the pipe
Create a little image for the top.
Divide your image into different divs.
<div>
<div class="bar1">
<div class="bottom"></div>
<div class="middle"></div>
<div class="top"></div>
</div>
</div>
Now you can style this with absolute positioning and repeating background images. I don't think it is very easy to do with floating and all, because you have to work from bottom to top.
Doing this with pure CSS might be overkill. Of course you can use gradients, but you can't get that shadow on the bottom of cylinders with css only. I'm not sure how to do cylinders top with css either.
The easiest way to do that is to use good old background images.
You might consider using canvas if you don't want any images at all.
UPD: If you can use CSS3, you might wanna use multiple background images. That way you'll have only one <div> instead of three of them. Good semantics.
Take a look at http://icant.co.uk/csscharts/. It's easily customizable with your own styles and has a handy PHP script for generating the tables.
Well... it can be done with some "brute force".
First of all you should cut the bases of the cilinders and put them on a background of a div with bottom alignment.
then in another div with know and fixed height add two divs of same width that float left and have on the background,repeating on Y axis a slice of a cilinder. then control their height as you need it. Below the div that contains the other two you can add the captions.
Now you will have the cilinders of the same height. In order to "shorten" one you create another div inside it that has a certain height and a white background (repeating image or color).
ex {
<div id="chart"> <!-- this one has the bottom cut backgound -->
<div style="height:200px">
<!-- cilinder class has the background -->
<div class="clinder" style="height:100%"> </div>
<div class="clinder" style="height:100%">
<!-- this one has white bg -->
<div class="shorter" style="height:30px"> </div>
<div>
</div>
<div class="labels">
<div class="caption">
Indoor
</div>
<div class="caption">
Outdoor
</div>
</div>
</div>
It should work like this.
You can make cylinders with CSS3 by giving it a box-radius.
For example:
box-radius: 100px / 30px;
This will give you a box an oval look.
Just give it the desired width and height and it's done :)
Or use jqPlot as a jquery plugin. This plugin can make lots of graphs.