Can someone help me with this? I want make this design, But I have problem with position. Here is image
Here is code
> https://plnkr.co/edit/Smyes7rZXVcqq5IugW2o?p=preview
The below skeleton will work for you best.
Set parent div's height and display to table (min-height won't work for you here). You can vertically align contents inside the parent div if you set child div's display to table-cell and vertical-align to middle. The child content will automatically align vertically even if the content height changes.
<div class="container">
<div class="col-sm-6 left">
<div class="inner">
<span>become our partner</span>
contact us
</div>
</div>
<div class="col-sm-6 right">
//right side content
</div>
</div>
.left{
height: 500px;
background: #ccc;
display: table;
}
.inner{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner span, .inner a{
display: block;
text-transform: uppercase;
}
Related
I have three divs, all inline under a parent div. And my goal is to make middle div ALWAYS in the centre of the parent div. While rest two side divs are responsive. In left hand side div, text is align to right while in left hand side div, its aligned to left. And middle div's width is fixed, say 80px. Parent div's max and min width are also set. I have this:
<div style="max-width: 500px;min-width:450px;">
<div style="display:inline-block;text-align:right;">Posted by</div>
<div style="display:inline-block;text-align:center;width:80px;">
<img src="default.png" style="width:80px;height:20px;border:2px solid #fff;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;">
</div>
<div style="display:inline-block;">Johnathan Bestualzaukazoa</div>
</div>
I want to have something like this:
But middle div is not always in center. As side divs content push them.So how can I achieve it?
I suggest to use this CSS table layout for it. I set 50% on both left and right sides, and middle one with an image. Because it's table layout it won't break, instead it will re-calculate the value of 50% and display the best width "(100% - image width) / 2" available automatically.
jsfiddle
.container {
display: table;
border: 2px solid grey;
margin: 20px auto;
}
.container > div {
display: table-cell;
}
.left, .right {
width: 50%;
padding: 0 10px;
}
.left {
text-align: right;
}
.middle img {
vertical-align: middle;
}
.right {
text-align: left;
}
.container1 { width: 500px; }
.container2 { width: 400px; }
.container3 { width: 300px; }
<div class="container container1">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
<div class="container container2">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
<div class="container container3">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
On my site, I have a div set to display: table. Inside that another div with display: table-row. Inside that 2 divs set to display: table-cell. On the first(left) table-cell div, I am trying to center a div. The only way that div will center is if I stick a div above it with enough content to fill the entire div.
Here is my HTML (with a lot of ugly non-breaking spaces):
<section class="main-content">
<div class="row">
<section class="cell leftSide">
<section class="mainWrap">
<div class="clear-fix"></div>
<div class="paddingWrap">
<div class="widthFiller">
</div>
<div class="sitemap">
<hgroup class="title">
<h1>#Html.MvcSiteMap().SiteMapTitle()</h1>
</hgroup>
#Html.MvcSiteMap().SiteMap()
</div>
</div>
</section>
</section>
</div>
And my relevant CSS:
.main-content {
display: table;
width: 100%;
}
.main-content .row {
display: table-row;
}
.main-content .cell {
display: table-cell;
vertical-align: top;
}
section.mainWrap {
display: table-cell;
font-size: 1.2em;
margin-top: -34px;
}
.paddingWrap {
padding: 15px 70px;
}
.mainWrap .sitemap {
border: 2px solid #aaaaaa;
display: table;
margin: 20px auto;
padding: 10px;
text-align: center;
}
I need that sitemap div to be centered in the mainWrap table cell. If I remove the "widthFiller" div with all the spaces, the sitemap div goes back to the left side.
And here is my live page that you can view the issue: http://clubschoicefundraising.com/about/site-map
I believe to have a display:table-cell you need it inside a table.
so around the div "mainWrap" put another div with the style display:table and width:100%
so:
<div class="mainWrapWrapper" style="display:table;width:100%">
</div class="mainWrap">
.....
<div>
</div>
currently the issue is that mainWrap will not obey any width css because it is not inside a table div, and when you check it's width it's not 100% so your margin:0px auto on the sitemap will not do anything
Edit: also, you can remove width filler
There are some answers to a similar question already, but this one has a twist.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 grey">
<div class="wrapper">
<div class="info">(i)</div>
<div class="text"><div class="labeled">This is a long text</div></div>
<div class="icon">[$]</div>
</div>
</div>
<div class="col-xs-12 col-sm-9 green">
Content
</div>
</div>
So I need three divs, aligned in one line at all conditions - info, text, icon - with two divs on the sides having fixed h/w, and one in the middle taking only as much space, as
either it needs, and not more
or is available for it, cutting the context with overflow:hidden
Here is the fiddle http://jsfiddle.net/L7tmt5w1/3/
Here are my mad skills in sketching ideas http://imgur.com/tF0HkD2
For those, who want to feel my pain, you may also try re-ordering the divs - text, icon, info - when the screen size goes mobile (bootstrap's col-xs-)
You can use the display: table-cell; method for this situation:
.wrapper {
display: table;
text-align: right;
width: 100%;
}
.info {
width: 20px;
height: 20px;
display: table-cell;
background-color: #005ea8;
color: #fff;
}
.icon {
width: 20px;
height: 20px;
display: table-cell;
background-color: #eb690b;
color: #fff;
}
.text {
display: table-cell;
background-color: #ccc;
width: auto;
}
This mimics the table display properties and keeps all the children of .wrapper inline and the middle one "elastic" as it has no defined width. You can also remove the floats.
http://jsfiddle.net/L7tmt5w1/7/
maybe this solution will help you DEMO
<aside class="panel">
...
</aside>
<div class="content">
...
</div>
.content {
overflow: hidden;
border: 1px solid;
}
.panel {
float: right;
width: 200px;
border: 1px solid;
}
You can try this http://jsfiddle.net/L7tmt5w1/3/
Remember: If you want to float an element to the right, it must be the first element. For example:
<div style="float:right"></div>
<div style="float:left"></div>
AND DIV's are already block elements, so you don't have to add display:block to a DIV-element
I don't know if this is what you want: jsfiddle
if not content on "text" no div... if too much content it's hidden
(but you can add
overflow:auto
to the text div for scroll bars
I have a div containing a title text and an image.
With the code below, the title is showing just above the image.
HTML code:
<div class="thumbnail">
<div class="text">
<center>Heading</center>
</div>
<div class="image">
<img src="sample.png">
</div>
</div>
I would like to align the title so that it will appear on the center (vertically and horizontally) of the image.
How can I achieve that using HTML and CSS?
You could remove the image tag and make the image be the background of the container div.
HTML
<div class="text">
Heading
</div>
CSS
.text {
background-image: url('sample.jpg');
text-align: center;
}
EDIT: I don't want to sell it as my perfect answer, but I realized I missed the vertical alignment, and as similar solutions have already been provided here in comments and answers, let me just provide you with a good source of info below. The point is that you could use vertical-align:middle if you used span or other inline element, but with div, you have to use other tricks like position:absolute and minus margins.
Source: http://phrogz.net/css/vertical-align/index.html
Your markup is mostly correct with the exception of using the center element and you do not need to wrap the img element in a div.
Here is some example markup:
<div class="thumbnail">
<h1>Heading</h1>
<img src="sample.png">
</div>
And its corresponding CSS:
.thumbnail {
position:relative;
}
.thumbnail h1 {
text-align:center;
position:absolute;top:50%;left:0;width:100%;
margin-top:-20px; /*make the negative top margin = half your h1 element height */
}
You could always use an element other than an h1 to hold your title. This just depends on your preference.
The following might help you.
HTML:
<div class="thumbnail">
<div class="text">
Heading
</div>
</div>
CSS:
.text {
background-image: url('http://cs616623.vk.me/v616623331/7991/vPKjXbo-c7o.jpg');
width: 320px;
height: 240px;
line-height: 240px;
vertical-align: middle;
text-align: center;
font-size: 48px;
}
Take into account that in this approach you would have to set manually the height and the width of your text element. Moreover, the height should be duplicated in the line-height in order for vertical alignment to work correctly.
You could test and change the code in the corresponding JSFiddle or just check the full-screen result.
I wouldn't recommend using lineheight to vertically align the text(as some answers suggest) solely because if the header is to long and spans over across two rows it would look terrible.
What I would do is to absolute position the heading and then use display: table-cell to vertical align it.
Note that to be able to use this solution you have to specify an height for the heading.
HTML
<div class="thumbnail">
<div class="text">
<h1>Heading</h1>
</div>
<div class="image">
<img src="http://placehold.it/350x250" />
</div>
</div>
CSS
.thumbnail{
position: relative;
display: inline-block;
}
.text{
position:absolute;
top: 0px;
left: 0px;
width: 350px;
}
.text h1{
height: 250px;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 350px;
color: #fff;
}
JSfiddle here
I have the following HTML:
<div class="section-cover dark-cyan" ng-style="{height: getCoverHeight()}">
<div class="container">
<h1 class="intro">Some intro text.</h1>
</div>
<div class="arrow-holder" ng-click="scrollTo('video-container');">
<span class="arrow"></span>
</div>
</div>
The .section-cover div changes height dynamically based on viewport size whenever the browser is resized. I need to align the <h1> element vertically inside the section-cover div. So far I've achieved that using display: table-cell however now I can't get the width to stick at 100%. Here's a JSFiddle example:
http://jsfiddle.net/AvrrM/
How can I modify this to vertically align the <h1> and keep the width at 100%?
Maybe something like this?
http://jsfiddle.net/AvrrM/1/
.section-cover {
position: relative;
display: table;
vertical-align: middle;
width: 100%;
}
.container{
display: table-cell;
background: red;
text-align: center;
vertical-align: middle;
}
Why is itsn't working?? because table-cell is similar to html table, you need to provide a container which is table type before you can make the table-cell occupy the full width!!
working fiddle
add this CSS in your markup :
html, body {
width: 100%;
height:100%;
margin:0;
padding:0;
}
#table {
width: 100%;
display:table;
text-align:center;
}
HTML
<div id="table">
<div class="section-cover dark-cyan" style="background: blue; color: white; height: 200px">
<!-- all inner html here -->
</div>
</div>