.image-fixed-size-and-vertical-middle {
width: 40px;
height: 40px;
vertical-align: middle;
padding-top: auto;
padding-bottom: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group">
<li class="list-group-item">
<div class="col-xs-3 col-md-2">
<div class="image-fixed-size-and-vertical-middle">
<img class="img-responsive" src="http://placehold.it/122x122">
</div>
</div>
<div class="col-xs-9 col-md-10">
<h4>header</h4>
<p>content</p>
</div>
<div class="clearfix"></div>
</li>
</ul>
The image is in the top of col. how to make it vertical middle?
plz try this one:
Html:
<div class="image-fixed-size-and-vertical-middle">
<img class="image" src="http://www.mictronics.de/yampp_color_themes/bmp0_test_image.bmp" />
</div>
Css
.image-fixed-size-and-vertical-middle{
display:table-cell;
vertical-align:middle;
position:fixed;
width:100%;
text-align:center;
z-index:600;
cursor:pointer;
left:0;
top:100px;
}
.image-fixed-size-and-vertical-middle img{
position:relative;
height:100px;
border:1px solid grey;
}
ty to use this in style
<style>
.image-fixed-size-and-vertical-middle
{
position:relative;
min-height:69px;
}
.image-fixed-size-and-vertical-middle img
{
width: 40px;
height: 40px;
position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;
margin:auto;
}
</style>
Related
how can i achieve the attached layout
using html, bootstrap, CSS
where the circles will contains an images
and a detail box will be beside them
question has been updated with code snippet
what i have done is not accurate the sizes not responsive
and if i make the circle bigger than the rectangle it does not align vertically in middle
also the code inside the rectangle is not middle
could any one please provide me a demo
custom layout
.rectangle1{
display:block;
height:40px;
width:150px;
background:red;
position:relative;
margin-top:100px;
}
.circle1{
position:absolute;
height:40px;
width:40px;
border-radius:40px;
border:3px solid white;
left:0%;
margin-left:-25px;
top: 0px;
background:red;
}
.rectangle1{
display: inline-block;
height: 100px;
width: 100%;
background: #6f0a18;
position: relative;
}
.circle1{
position:absolute;
height:100px;
width:100px;
border-radius:50%;
border:3px solid white;
left:0%;
margin-left:-25px;
top: 0px;
background:red;
}
.circle2{
position:absolute;
height:100px;
width:100px;
border-radius:50%;
border:3px solid white;
right:0%;
margin-right:-25px;
top: 0px;
background:red;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="rectangle1">
<img class="circle1" src="https://www.freeiconspng.com/uploads/camera-icon-circle-21.png" />
<h3 style="padding-left: 100px;">Title</h3>
<p style="padding-left: 100px;"> Sub Title</p>
</div>
</div>
<div class="col-md-6">
<div class="rectangle1">
<img class="circle2" src="https://www.freeiconspng.com/uploads/camera-icon-circle-21.png" />
<h3 style="padding-right: 100px; text-align: right;">Title</h3>
<p style="padding-right: 100px; text-align: right;"> Sub Title</p>
</div>
</div>
</div>
</div>
.outer-wrapp {
padding:30px;
}
ul {
list-style:none;
padding:0;
}
ul li {
margin: 55px 0px;
}
.wrapp{
padding:0px 15px;
}
.left .box {
position:relative;
width:95%;
height:35px;
border:1px solid #000;
margin-left: 5%;
padding-left: 20%;
}
.left .circle {
position:absolute;
width:75px;
height:75px;
border-radius:50%;
background:#000;
top: calc(50% - 37.5px);
left: -37.5px;
}
.right .box {
position:relative;
width:95%;
height:35px;
border:1px solid #000;
margin-right: 5%;
padding-right: 20%;
}
.right .circle {
position:absolute;
width:75px;
height:75px;
border-radius:50%;
background:#000;
top: calc(50% - 37.5px);
right: -37.5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="outer-wrapp">
<div class="row">
<div class="col-xs-6 col-sm-6">
<ul class="left">
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
<span>Text</span>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-xs-6 col-sm-6">
<ul class="right">
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Try this. it works for you.
Try something like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.circle {
height: 40px;
width: 40px;
background-color: #000;
border-radius: 50%;
}
#id1 {
border: 1px solid black;
padding: 11px;
margin: 30px;
width: 100px;
}
</style>
</head>
<body>
<h2>Circle CSS</h2>
<div class="circle"><div id='id1'> text here</div></div>
</body>
</html>
try this
.container{
width:100%;
background:red;
margin:10px 0;
}
#image{
width:20%;
float:left;
}
#image img{
border-radius: 50px;
}
#text{
width:80%;
float:left;
}
#text h3{
padding:10px;
}
<div class="container">
<div id='image'>
<img src='https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png' width='100%' />
</div>
<div id="text">
<h3> Hello </h3>
</div>
<div style="clear:both;"></div>
</div>
<div class="container">
<div id='image'>
<img src='https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png' width='100%' />
</div>
<div id="text">
<h3> Hello </h3>
</div>
<div style="clear:both;"></div>
</div>
I want to ask why my html code with and float can't divide the page into column form. I have already used float.I have seen other people code the similar things for dividing page to column.But Why it is not successful in this way.Is there any bug.
this is my html file.
<html>
<head>
<title >
Test
</title>
</head>
<body>
<h1 id="center" ><I>
Testing
</I></h1>
<div id="left_list">
<ul Type=Circle>
<LI>Main Page</LI>
<LI>Course</LI>
<LI>Location</LI>
</ul>
</div>
<div id="image">
<img src="hi.png" alt="FAIL">
</div>
<div id="image">
<img src="bye.png" alt="FAIL">
</div>
<div id="image">
<img src="download.jfif" alt="FAIL">
</div>
<LINK REL=Stylesheet TYPE="text/css" HREF="style.css">
</body>
</html>
This is style.css
#left_list{
Font-size:20px;
float: left;
width:300px;
margin-right:20px;
height:800px;
background-color:#00FF7F;
clear:both;
}
#image{
float:left;
margin-right:20px;
height:800px;
width:400px;
clear:both;
}
#rightimage{
float: right;
margin-right:20px;
height:800px;
width:400px;
clear:both;
}
#center{
align:center;
}
body{
background-color:#6495ED;
}
head{
font-size:large;
}
<div class="clearfix" id="wrapper">
<div id="left_list">
<ul Type=Circle>
<li>Main Page</li>
<li>Course</li>
<li>Location</li>
</ul>
</div>
<div id="image">
<img src="hi.png">
</div>
</div>
css code:
#wrapper {
margin-right: 200px;
border:2px dashed red;
}
#image {
float: left;
margin-right: 20px;
height: 400px;
width: 200px;
background: #444;
}
.clearfix:before,
.clearfix:after{
content:'';
display:block;
clear:both;
}
you don't use clear:both for floating elements.
I am building a website and right now I'm just about to complete the homepage. Now, the footer has a few links in it along with a few images next to each other like a contact us bar. But the links don't seem to align with the images even after trying everything. They seem to hang a little lower than the paragraphs or spans. I tried converting the spans on the same line to links but now all of them hang low.
HTML:
<div id="brdr_btm">
<div id="contactOptionContainer">
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/pGiDhI2.png?1"/>
<div id="ctcLinks">
La Martiniere College, Lucknow
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/E8Ow3O7.png?1">
<div id="ctcLinks">
secretariat#lmun.org
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" id="ic_call" src="http://i.imgur.com/1di7mj9.png?1">
<!--<div id="phoneno">-->
<div id="ctcLinks">
+91 9670680417 (Sec. Gen), <!-- was span -->
+91 9415444444 (Dep. Sec. Gen) <!-- was span -->
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/2HZVi1r.png?1">
</div>
</div>
</div>
CSS:
#brdr_btm
{
display:flex;
position:relative;
height: 25px;
width: 100%;
background-color: #70A5DA;
top:100%;
vertical-align:bottom;
margin_top:10px;
clear:both;
box-sizing:content-box;
/*z-index:-1;*/
}
#contactUs
{
margin:auto;
}
#contactOptionContainer
{
position:relative;
display:inline-block;
margin-top:auto;
margin-bottom:auto;
/* text-align:center;*/
box-sizing:content-box;
width:auto;
}
.ctcObject
{
display:inline-block;
margin-left:auto;
margin-right:5em;
/* margin-bottom:6px;*/
/* margin-top:auto;*/
}
.ic_contact
{
position:relative;
margin-top:6.25px;
margin-bottom:6.25px;
height: 12.5px;
width: 12.5px;
-webkit-user-drag:none;
user-select:none;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
user-drag:none;
/* z-index:-1;*/
}
#ic_call
{
margin-top: -2px;
height:10.5px;
width:10.5px;
}
#ctcLinks
{
position:relative;
display:inline-block;
}
#ctcLinks a
{
position:relative;
margin-top:-6px;
margin-bottom:0px;
/* display:inline-block;*/
font-size:0.8em;
color:#FFFFFF;
/* text-align:center;*/
}
#phoneno
{
position:relative;
display:inline-block;
text-align:center;
}
#phoneno span
{
margin-left:0;
margin-right:0;
margin-bottom:6px;
margin-top: -1px;
text-align:center;
display:inline-block;
color:#ffffff;
vertical-align:middle;
font-size:0.9em;
}
How do I prevent this from happening and what causes it?
What might be the solution to the problem?
Here's my JSFiddle: http://jsfiddle.net/mfxefccz/
You should add to .ic_contact and #ctcLinks this style
display: inline-block;
height: 100%;
vertical-align: middle;
#brdr_btm
{
display:flex;
position:relative;
height: 25px;
width: 100%;
background-color: #70A5DA;
top:100%;
vertical-align:bottom;
margin_top:10px;
clear:both;
box-sizing:content-box;
/*z-index:-1;*/
}
#contactUs
{
margin:auto;
}
#contactOptionContainer
{
position:relative;
display:inline-block;
margin-top:auto;
margin-bottom:auto;
/* text-align:center;*/
box-sizing:content-box;
width:auto;
}
.ctcObject
{
display:inline-block;
margin-left:auto;
margin-right:5em;
/* margin-bottom:6px;*/
/* margin-top:auto;*/
}
.ic_contact
{
position:relative;
margin-top:6.25px;
margin-bottom:6.25px;
height: 12.5px;
width: 12.5px;
display: inline-block;
height: 100%;
vertical-align: middle;
-webkit-user-drag:none;
user-select:none;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
user-drag:none;
/* z-index:-1;*/
}
#ic_call
{
margin-top: -2px;
height:10.5px;
width:10.5px;
}
#ctcLinks
{
position:relative;
display: inline-block;
height: 100%;
vertical-align: middle;
display:inline-block;
}
#ctcLinks a
{
position:relative;
margin-top:-6px;
margin-bottom:0px;
/* display:inline-block;*/
font-size:0.8em;
color:#FFFFFF;
/* text-align:center;*/
}
#phoneno
{
position:relative;
display:inline-block;
text-align:center;
}
#phoneno span
{
margin-left:0;
margin-right:0;
margin-bottom:6px;
margin-top: -1px;
text-align:center;
display:inline-block;
color:#ffffff;
vertical-align:middle;
font-size:0.9em;
}
<div id="brdr_btm">
<div id="contactOptionContainer">
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/pGiDhI2.png?1"/>
<div id="ctcLinks">
La Martiniere College, Lucknow
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/E8Ow3O7.png?1">
<div id="ctcLinks">
secretariat#lmun.org
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" id="ic_call" src="http://i.imgur.com/1di7mj9.png?1">
<!--<div id="phoneno">-->
<div id="ctcLinks">
+91 9670680417 (Sec. Gen), <!-- was span -->
+91 9415444444 (Dep. Sec. Gen) <!-- was span -->
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/2HZVi1r.png?1">
</div>
</div>
</div>
Here a demo.
So, displayed it like an inline-block, because display: inline-block; don't work with blocks. And give then a height: 100%. In this case in means 100% from a parent. So we always have an image or block in the vertical center.
You have set margins for .ic_contact. If you remove margin-bottom for .ic_contact, your images and links would align properly. see here
.ic_contact
{
position:relative;
margin-top:6.25px;
height: 12.5px;
width: 12.5px;
}
I have a div that holds content in it that has a relative position and is restricted by 980px width. I'm trying to give this div a background image banner that will spread out 100% width of the screen. I can't seem to figure it out.
The div that I'm trying to throw the image is #design-background that should be the background of div #bottom-content
Thanks in advance:
JSFiddle: https://jsfiddle.net/74j0o4mx/
<div id="container-content">
<div id="content">
<div id="all-content">
<div id="top-content">
<div id="top-left-content">
<div class="content-body" role="main" aria-label="Main Content Area"><div class="editorContent"><div style="font-family: ralewayregular; font-size: 120%; color: #a5610b; line-height: 200%; text-align: justify;">
<p>stuff</p>
</div></div><div style="clear:both;"></div></div> </div>
<div id="top-right-content">
<p>stuff</p>
</div>
<div id="bottom-content">
<div id="design-background">
</div>
<div id="bottom-left-content">
<div id="bottom-left-top">
<a href="#">
<img src="/images/layout/layoutImg4.jpg" alt="" width="304" height="194"> <h3>EXAMPLE</h3>
</a>
</div>
<div id="bottom-left-bottom">
<a href="#">
<img src="/images/layout/layoutImg3.jpg" alt="" width="304" height="195"> <h3>EXAMPLE</h3>
</a>
</div>
</div>
<div id="bottom-center-content">
<div id="bottom-center">
<a href="#">
<img src="/images/layout/layoutImg5.jpg" alt="" width="311" height="406"> <h3>EXAMPLE</h3>
</a>
</div>
</div>
<div id="bottom-right-content">
<div id="bottom-right-top">
<a href="#">
<img src="/images/layout/layoutImg1.jpg" alt="" width="308" height="195"> <h3>EXAMPLE</h3>
</a>
</div>
<div id="bottom-right-bottom">
<a href="#">
<img src="/images/layout/layoutImg2.jpg" alt="" width="308" height="195"> <h3>EXAMPLE</h3>
</a>
</div>
</div>
</div>
<div id="bottom-text-content">
<p>stuff</p>
</div>
</div>
</div>
</div>
</div>
CSS:
#design-background{
position:absolute;
height:350px;
top:50%;
left:0px;
right:0px;
margin-top: -175px;
background: url('../images/background-dec.jpg');
}
#content{
position:relative;
margin: 0 auto;
left:0;
right:0;
width:980px;
}
#all-content{
display:block;
position:relative;
width:98.9%;
margin: 0 auto;
}
#top-content{
margin: 0 0 0 13px;
position:relative;
display:block;
width:98.9%;
min-height: 165px;
}
#top-left-content{
position:relative;
width:65%;
left:0;
margin-top: 10px;
}
#top-right-content{
position:absolute;
right:0;
top:0;
width:35%;
margin-top: -30px;
text-align: right;
}
#bottom-content{
position:relative;
display:block;
text-align:right;
height:407px;
}
#bottom-left-content{
width:33%;
position:relative;
float:left;
height:407px;
margin-right:3.5px;
}
#bottom-center-content{
position:relative;
width:33.33%;
float:left;
height:407px;
text-align: center;
}
#bottom-right-content{
position:relative;
float:right;
width:33%;
height:407px;
}
#bottom-left-top{
position:absolute;
right:0;
}
#bottom-left-bottom{
position:absolute;
bottom:0px;
right:0;
}
#bottom-right-top{
position:absolute;
right:0;
}
#bottom-right-bottom{
position:absolute;
bottom:0px;
right:0;
}
#bottom-center{
position:absolute;
margin: 0 0 0 12px;
left:0;
right:0;
}
#bottom-text-content{
position:relative;
display:block;
width:100%;
text-align:center;
font-family: Semibold;
color: rgb(165,97,11);
font-size:300%;
vertical-align: middle;
}
#content h3{
display:none;
}
#content a:hover h3{
color:#FFF;
display:block;
position: absolute;
top:50%;
margin-top: -25px;
width:100%;
text-decoration: none;
font-family: ralewayregular;
height:50px;
background-color: rgba(0,0,0,0.7);
text-align: center;
padding-top:25px;
font-size: 200%;
}
#container-content{
position:relative;
margin: 0 auto;
width:100%;
height:100%;
background-color:#FFF;
min-height: 680px;
}
The key is to make sure the parent of #design-background has a position relative value and set to 100% width. Read this to learn how it works.
Important properties:
#content {
position:relative;
}
#all-content {
width:980px;
margin: 0 auto;
}
See the updated demo here - http://jsfiddle.net/rrwjkb3g/
I am trying to place some text inside an image, but the text div is not coming on top of the image, rather it is hidden and invisible right below the image. thanks in advance!
Here is a link to jsfiddle:
http://jsfiddle.net/XrXZj/1/
have the following in my css file:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:relative;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
font-size:15px;
line-height:25px;
width:500px;
}
and here is the content of html file:
<div class="spotlight">
<img src="<spring:url value="/assets/img/banner-natural-hazard-risk.jpg"/>" border="0" />
<div class="wrapper">
<div class="middle">
<div class="spotlight-copy">
<spring:message code="content.location.title" />
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
.spotlight .wrapper {
position:absolute;
top: 0;
}
I put there a solution http://jsfiddle.net/NPh76/
HTML is:
<div class="wrapper">
<div class="middle">
<div class="spotlight">
<img src="http://www.springsource.org/files/header/logo-spring-103x60.png" border="0" />
<div class="spotlight-copy">
message in spotlight copy
</div>
</div>
</div>
<div style="clear: both;"></div>
notice about HTML:
<IMG> is into .middle to be at same level as .spotlight-copy
CSS is:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:absolute;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
position:absolute;
top: 0px;
font-size:15px;
line-height:25px;
width:500px;
color:#FF0000;
}
notice about CSS
position:absolute; in .spotlight-copy
top: 0px; for position
color:#FF0000; to see something ;)