.wrapper {
width: 100%;
height: 150px;
}
.iconBar div {
float: left;
font-size: 18px;
}
div.iconBar {
display: table;
margin: 0 auto;
}
.iconBar img {
height: 35px;
width: 35px;
vertical-align: middle;
}
<div class="wrapper">
<div class="iconBar">
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/convenient.png"> Convinient, All-Inclusive Weekly Price
</div>
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/Insurance.png"> Insurance
</div>
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/mileage.png"> Milage Allowance & Expenses
</div>
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/tractorTrailer.png"> Tractor & Expandable Trailer
</div>
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/professionalDriver.png"> Professional Driver
</div>
</div>
</div>
Why is my div not centering? I am having trouble making the div center. I tried a bunch of solutions from other people and i got it to work in one of the tests, but this one is not working?
Edit: iconBar Div, i want the text and icons to be centered. It needs to look like the bottom picture
Going by your image remove float:left and add display: inline-block; to .iconBar div {...} and add text-align: center; to div.iconBar {...}
.wrapper {
width: 100%;
height: 150px;
}
.iconBar div {
display: inline-block;
font-size: 18px;
}
div.iconBar {
display: table;
text-align: center;
margin: 0 auto;
}
.iconBar img {
height: 35px;
width: 35px;
vertical-align: middle;
}
<div class="wrapper">
<div class="iconBar">
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/convenient.png"> Convinient, All-Inclusive Weekly Price
</div>
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/Insurance.png"> Insurance
</div>
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/mileage.png"> Milage Allowance & Expenses
</div>
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/tractorTrailer.png"> Tractor & Expandable Trailer
</div>
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/professionalDriver.png"> Professional Driver
</div>
</div>
</div>
Related
I have the following HTML code
<div class="wrapper">
<div class="recipe" id="1">
<img src="https://www.biggerbolderbaking.com/wp-content/uploads/2017/07/1C5A9329.jpg" class="recipe-logo" />
<p class="item-1">Chocolate Brownies</p>
<p class="item-2">24/11/2019</p>
<p class="item-3">Prep Time: 20mins</p>
<p class="item-4">Cook Time: 30mins</p>
</div>
</div>
with the following CSS attached
.recipe {
background-color: white;
height: 250px;
}
.recipe-logo {
width: 250px;
height: 250px;
}
.recipe {
background-color: white;
height: 250px;
}
.recipe-logo {
width: 250px;
height: 250px;
}
<div class="wrapper">
<div class="recipe" id="1">
<img src="https://www.biggerbolderbaking.com/wp-content/uploads/2017/07/1C5A9329.jpg" class="recipe-logo" />
<p class="item-1">Chocolate Brownies</p>
<p class="item-2">24/11/2019</p>
<p class="item-3">Prep Time: 20mins</p>
<p class="item-4">Cook Time: 30mins</p>
</div>
</div>
I want to have a sideway list that looks something like this
however, even though I have the wrapper div ('recipe') set to only have a height of 250px, the <p> tags break out of the div, and form a vertical list below it, so I get this
Wrap items into another div and change recipe display to flex.
.recipe {
display: flex;
background-color: white;
height: 250px;
}
.recipe-logo {
width: 250px;
height: 250px;
}
<div class="wrapper">
<div class="recipe" id="1">
<img src="https://www.biggerbolderbaking.com/wp-content/uploads/2017/07/1C5A9329.jpg" class="recipe-logo" />
<div>
<p class="item-1">Chocolate Brownies</p>
<p class="item-2">24/11/2019</p>
<p class="item-3">Prep Time: 20mins</p>
<p class="item-4">Cook Time: 30mins</p>
</div>
</div>
</div>
you need more styles to add flexbox
<div class="wrapper">
<div class="recipe" id="1">
<img src="https://www.biggerbolderbaking.com/wp-content/uploads/2017/07/1C5A9329.jpg" class="recipe-logo" />
<div class="p_wrapper">
<p class="item-1">Chocolate Brownies</p>
<p class="item-2">24/11/2019</p>
<p class="item-3">Prep Time: 20mins</p>
<p class="item-4">Cook Time: 30mins</p>
</div>
<div>
</div>
.recipe{
display: flex;
flex-direction: row;
}
.p_wrapper{
display: flex;
flex-direction: column;
}
You need your img and div to be in display: inline-block. It allows you to display items side-by-side instead of vertically. One common use for it is with list items.
Here is an example:
h2 {
margin-top: 0;
margin-bottom: 5px;
}
img {
display: inline-block;
vertical-align: top;
}
#content {
display: inline-block;
margin-left: 5px;
}
<img src="https://store.playstation.com/store/api/chihiro/00_09_000/container/FR/fr/999/EP0149-CUSA09988_00-AV00000000000001/1553560094000/image?w=100&h=100&bg_color=000000&opacity=100&_version=00_09_000" alt="img" />
<div id="content">
<h2>Chocolate Brownies</h2>
<div>24/11/2019</div>
<div>Prep time: 20mins</div>
<div>Cook time: 30mins</div>
</div>
I want the two div containers inside the .firstcontainer div to appear side by side so I gave them the display: inline-block, but that doesn't seem to work.
.firstcontainer {
display: block;
}
.imagecontainer {
display: inline-block;
margin-left: 70px;
}
.SeasonCounterContainer {
margin-left: 20px;
display: inline-block;
}
<div class="centralcontainer">
<div class="firstcontainer">
<div class="imagecontainer">
<img src="http://subs-40ea.kxcdn.com/posters/better-call-saul.jpg" alt="">
</div>
<div class="SeasonCounterContainer">
<p>46 min | Crime, Drama</p>
</div>
</div>
</div>
Note: I've already tried different solutions but none worked for me.
You have to use a width setting on those inline-blocks to get them side by side, since the default width of inline-blocks is the width of their contents, up to 100% of the parent. Also the image width needs to be restricted to not become more than the width of its container.
.firstcontainer {
display: block;
}
.imagecontainer {
display: inline-block;
margin-left: 70px;
width: 200px;
}
.imagecontainer img {
width: 100%;
height: auto;
}
.SeasonCounterContainer {
margin-left: 20px;
display: inline-block;
width: 150px;
}
<div class="centralcontainer">
<div class="firstcontainer">
<div class="imagecontainer">
<img src="http://placehold.it/600x400/fa0">
</div>
<div class="SeasonCounterContainer">
<p>46 min | Crime, Drama</p>
</div>
</div>
</div>
I am trying to achieve facebook alike image cover as follow, but unable to achieve desire effect. This is the css that i have try. As you all can see, the div content does not position correctly.
.profile {
position: relative;
}
.profile-cover img{
width: 100%;
}
.profile-photo {
position: absolute;
left: 20px;
bottom: -60px;
}
.profile-info {
padding-right: 120px;
}
<div class="profile">
<div class="profile-cover">
<img src="http://dummyimage.com/1200x300/000/fff" />
</div>
<div class="profile-details">
<div class="profile-photo">
<img src="http://dummyimage.com/100x100/eee/000" />
</div>
<div class="profile-info">
Profile info here
</div>
</div>
</div>
<div>
Remaining content here
</div>
I am not exactly sure if you wanted this because you just say the "the div content does not position correctly", but I'm quiet sure it's that.
So, if not, tell me.
Using the absolute positioning gets out of the flow the element. So, the next ones continues as if this element didn't exist. That's why the others were showing under this absolute element.
For next time, please precise which DIV by using its id, a class name or anything that we can know for sure the one you are talking about.
.profile {
position: relative;
}
.profile-cover img{
width: 100%;
}
.profile-photo {
display: inline-block;
margin-top: -60px;
margin-left: 20px;
}
.profile-info {
display: inline-block;
padding-right: 120px;
}
<div class="profile">
<div class="profile-cover">
<img src="http://dummyimage.com/1200x300/000/fff" />
</div>
<div class="profile-details">
<div class="profile-photo">
<img src="http://dummyimage.com/100x100/eee/000" />
</div>
<div class="profile-info">
Profile info here
</div>
</div>
</div>
<div>
Remaining content here
</div>
This is how I would do it ...
.profile {
margin-bottom: 15px;
}
.profile-cover img {
width: 100%;
}
.profile-photo {
display: inline-block;
margin-left: 20px;
margin-top: -24px;
}
.profile-info {
display: inline-block;
position: relative;
top: -25px;
left: 10px;
}
<div class="profile">
<div class="profile-cover">
<img src="http://dummyimage.com/1200x300/000/fff" />
</div>
<div class="profile-details">
<div class="profile-photo">
<img src="http://dummyimage.com/100x100/eee/000" />
</div>
<div class="profile-info">
Profile info here<br>
More info here
</div>
</div>
</div>
<div>
Remaining content here
</div>
I have a html page with a page title.
The height of the page title is determined by the height of the users photograph. The users photograph can be any size.
The issue that I cannot solve myself is that I am trying to vertical-align the text title to the middle of the title holder, but I am not able to figure this out if the photo has a dynamic height (the max-height is 149px). Assigning a specific height to the div does allow the middle vertical alignment, but as the users photograph can be any height, assigning a set height can make the appearance seem odd.
Here is what I am trying to achieve:
Does someone know how to vertical align middle the users name with a dynamic height? I have read several similar SO posts, tried several things but I cannot get this to work.
Here is my html code:
<div class="resumeStyleNameTitleWrapper">
<div class="resumeStyleNameTitle">
<div class="resumeStyleNameTitleInner">
<div class="resumeStyleNameTitleFontChange">Users Name</div>
</div>
</div>
<div class="resumeStyleNameTitlePhotograph">
<div class="resumeStyleNameTitlePhotographInner">
{# image has max-height: 149px & max-width: 149px; assigned in the css file #}
<img id="id_name_details_photograph" class="name_details_photograph_preview_dimensions" src="{{ name_details_photograph_url }}" />
</div>
</div>
</div>
Here is my CSS:
.resumeStyleNameTitleWrapper {
display: table-cell;
width: 100%;
}
.resumeStyleNameTitle {
direction: ltr;
display: table-cell;
float: left;
text-align: left;
width: calc(100% - 159px); /*less the width of the photograph plus 10px */
background-color: lime;
}
.resumeStyleNameTitleInner {
direction: ltr;
display: table-cell;
max-height: 149px;
text-align: left;
vertical-align: middle;
width: 100%;
background-color: orange;
}
.resumeStyleNameTitleFontChange {
direction: ltr;
font-size: 32px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
width: 100%;
}
.resumeStyleNameTitlePhotograph {
direction: ltr;
display: table-cell;
float: right;
max-height: 149px;
max-width: 149px;
text-align: right;
vertical-align: top;
}
.resumeStyleNameTitlePhotographInner {
display: inline-block;
vertical-align: middle;
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
}
Example: http://jsfiddle.net/kevalbhatt18/78Lzadtt/2/
I solved your Problem by putting resumeStyleNameTitlePhotograph clss in to resumeStyleNameTitleInner
<div class="resumeStyleNameTitleWrapper">
<div class="resumeStyleNameTitle">
<div class="resumeStyleNameTitleInner">
<div class="resumeStyleNameTitleFontChange">Users Name</div>
</div>
<div class="resumeStyleNameTitlePhotograph">
<div class="resumeStyleNameTitlePhotographInner">
<img id="id_name_details_photograph" class="name_details_photograph_preview_dimensions" src="">
</div>
</div>
</div>
</div>
So now if your image size change then your text div will also change its height depending upon image div size
Simplify your markup
One div containing a text element and an img:
The parent div is given display: table and text-align: right to align the image to the right
The names element (h2 in my example) is given display: table-cell and vertical-align: middle to keep it vertically centered. text-align: left brings the name to the left
The image is given vertical-align to remove the default baseline gap
Full Example
Compatibility: display: table is recognised in IE8+ and all modern browsers.
* {
margin: 0;
}
.name {
background: #F00;
display: table;
width: 100%;
text-align: right;
}
.name > img {
max-height: 149px;
max-width: 149px;
vertical-align: middle;
}
.name > h2 {
text-align: left;
display: table-cell;
vertical-align: middle;
padding: 0 10px;
}
<div class="name">
<h2>John Smith</h2>
<img src="http://www.placehold.it/200X100" />
</div>
Try this
.container {
display: table;
width: 80%;
background: green;
padding: 5px;
}
.first-child {
display: table-cell;
text-align: center;
vertical-align: middle;
background: yellow;
}
.second-child {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text {
color: red;
font-size: 20px;
}
<div class="container">
<div class="first-child">
<div class="text">
Username
</div>
</div>
<div class="second-child">
<img src="http://placehold.it/350x150" />
</div>
</div>
<br/>
<div class="container">
<div class="first-child">
<div class="text">
Username
</div>
</div>
<div class="second-child">
<img src="http://placehold.it/350x200" />
</div>
</div>
<br/>
<div class="container">
<div class="first-child">
<div class="text">
Username
</div>
</div>
<div class="second-child">
<img src="http://placehold.it/350x100" />
</div>
</div>
I will simply use table to accomplish this task. Neat and simple. No messing around with CSS, and I don't have to worry about browser compatibility.
Just ensure to set valign (vertical alignment) to middle on the column for username.
<table width="100%" border="0">
<tr>
<td width="52%" valign="middle">Username</td>
<td width="29%"> </td>
<td width="19%"><!-- IMAGE HERE --></div></td>
</tr>
</table>
HERE IS A FIDDLE
Here's the challenge I'm facing. I'm trying to get a div to appear behind another object and to center align to it.
This is what I'm up to so far: http://jsfiddle.net/imoda/GYha2/
And this is the result I'm trying to get
As you can see, I'm close. I just can't get it to align center and to position itself behind the other object.
Any thoughts?
HTML:
<div id="banner" class="grid_12">
<div class="bannerBgT"></div>
<div class="bannerBgY">
<div id="planPricingWrapper">
<div id="planPrices">
<div class="planPrice">
<div class="planPriceX"> </div>
<div class="planPriceR"></div>
<div class="clear"></div>
</div>
<div class="clear_10px"></div>
<div class="planPrice">
<div class="planPriceX"> </div>
<div class="planPriceR"></div>
<div class="clear"></div>
</div>
</div>
<div id="planPriceOptions">
<div class="planPriceOptionsBgT" id="supremacy"></div>
<div class="planPriceOptionsBgY" id="supremacy">
<div><img src="http://www.patientacquisitionsystem.com/images/plans/pricing_title_supremacy.png" width="183" height="27" alt="Supremacy" id="titleImg" /></div>
<img src="http://www.patientacquisitionsystem.com/images/plans/pricing_plan_supremacy.png" width="146" height="156" alt="" />
<div class="planFeatures"> <b>Includes Gold & Platinum Features Plus:</b>
<ul>
<li>Class 3 Rayhawk Design</li>
<li>Class 3 Content Management</li>
<li>Up to 6 Content Modules</li>
<li>Inclusion in 2 or more directories/portals</li>
<li>Access to Rayhawk brand management services*</li>
<li>Mobile device enabled educational content/videos</li>
<li>Marketing materials deployment system*^</li>
<li>2 hours per month of additional services</li>
</ul>
</div>
</div>
<div class="planPriceOptionsBgB" id="supremacy"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="bannerBgB"></div>
</div>
CSS:
#planPricingWrapper {
padding: 20px;
}
#planPrices {
float: right;
}
#planPrices * {
z-index: 1;
}
.planPrice > * {
float: left;
}
.planPriceX {
width: 280px;
height: 131px;
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_bg_x.png) repeat-x;
}
.planPriceR {
width: 11px;
height: 131px;
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_bg_r.png) no-repeat;
}
#planPriceOptions {
z-index: 9999999;
}
.planPriceOptionsBgT, .planPriceOptionsBgB {
width: 614px;
}
.planPriceOptionsBgT#supremacy, .planPriceOptionsBgY#supremacy, .planPriceOptionsBgB#supremacy {
background-color: #181818;
}
.planPriceOptionsBgT {
height: 10px;
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_t.png) no-repeat;
}
.planPriceOptionsBgY {
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_y.png) repeat-y;
color: #FFF;
text-align: center;
padding: 20px;
width: 574px;
min-height: 250px;
}
.planPriceOptionsBgY #titleImg {
margin-bottom: 10px;
}
.planPriceOptionsBgB {
height: 12px;
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_b.png) no-repeat;
}
.planFeatures {
display: inline-block;
vertical-align: top;
font-size: 14px;
text-align: left;
list-style: square;
margin-left: 10px;
}
.planFeatures ul {
list-style: square;
}
There are basically two ways to do vertically aligning:
Use tables (using either real HTML <table> tags or fake CSS display:table-cell declarations)
Use inline elements (again, either real HTML elements that are naturally inline, like <span>, or CSS display:inline-block declarations)
Here's an updated fiddle that uses display:inline-block to approximately get what you're after, I think. Notice that I also flipped around the two divs in the HTML.
It also uses the *display:inline; zoom:1; hack to make it work with IE6/7