How to display the image as vertical align in div container?
The image "setting.png" placed in last column in the code i attached. please advice solution please.
.table{
width: 100%;
margin: 20px 0px 20px 0px;
background-color: #EEEEEE;
}
.tableRow{
width: 100%;
clear: both;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #cccccc;
}
.tableCol{
float: left;
height: 40px;
line-height: 40px;
}
<div class="table">
<div class="tableRow">
<div class="tableCol" style="width:10%; text-align:center;">1</div>
<div class="tableCol" style="width:40%">Michael</div>
<div class="tableCol" style="width:40%">webexp#gmail.com</div>
<div class="tableCol" style="width:10%;">
<a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle" /></a>
</div>
</div>
</div>
Just add (space before a link)
<div class="table">
<div class="tableRow">
<div class="tableCol" style="width:10%; text-align:center;">1</div>
<div class="tableCol" style="width:40%">Michael</div>
<div class="tableCol" style="width:40%">webexp#gmail.com</div>
<div class="tableCol" style="width:10%;">
<a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle" /></a>
</div>
</div>
</div>
better solution:
add this to css:
img {
margin-top:10px;
}
Here, this should work:
Add this to your div which contains the image that should be centered.
display:table-cell;
vertical-align:middle;
This should center the image vertically no matter the dimensions of your div or the image that it contains.
You can do this with position: absolute; if you know the dimensions of the settings.png image (20px x 20px for this example).
Add class tableColSettings to the <a> around the settings image. Then add CSS;
.tableColSettings{
position: absolute;
display: block;
top: 50%;
left: 50%;
margin: -10px 0 0 -10px; /* Half image dimensions */
width: 20px;
height: 20px;
line-height: 0;
}
.tableColSettings img{
width: 100%;
}
The settings image will always stay in the center of the element, no matter the height. Here's a working fiddle: http://jsfiddle.net/384pa/
Hope this helps!
Css is having a tag name
"vertical-align" may be you will get your solution
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 5 years ago.
I want to make my div2 to centre align and div3 to be at right.
I tried doing that with text align: center for main div and making float right to div3 but it is making it center align by considering main div's remaining part. I have given display: inline-flex to main div
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
Please try with this code:
<div style="height: 40px;width:120px;background-color: yellow;align-items: center; position:relative;">
<div style="height: 20px;width:40px;background-color: red; overflow:auto; margin:0 auto">
Hello
</div>
<div style="height: 20px;position:absolute; right:0px; top:0px; width:20px;background-color: red;">
</div>
</div>
.main {
display: block;
position: relative;
width:100%;
text-align: center;
border: 1px solid red;
}
.main .div1 {
display: inline-block;
border: 1px solid;
}
.main .div2 {
float: right;
border: 1px solid;
display: inline-block;
}
<div class="main">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
Divs are block level elements, so you can use a margin of auto on the left and right to place it in the middle.
.center {
margin: 0 auto;
}
.right {
float: right;
}
In the HTML you will need to adjust the ordering of the divs. Put div 3 before div 2 so that when you float it, they appear on the same line:
<div class="outer">
<div class="right"></div>
<div class="center"></div>
</div>
https://jsfiddle.net/dcqpw12u/1/
You can use position:relative for the main, and position:absolute to the other div, and it also centers it vertically
.main {
text-align: center;
background-color: red;
height: 50px;
position: relative;
}
.div2 {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.div3 {
background-color: green;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
<div class="main">
<div class="div2">SOME DIV 2</div>
<div class="div3">SOME DIV 3</div>
</div>
Add style="margin: auto;" to your div2 element. And
style="margin-left: auto;" to your div3 element.
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="margin:auto; height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="margin-left:auto; height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
.contentmain{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: left;
background:red;
}
.contentCenter{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 30%;
float: left;
background:yellow;
}
.contentRight{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: right;
background:red;
}
<div class="contentmain">
Main<br/>
Content<br/>
</div>
<div class="contentCenter">
Center<br/>
Content<br/>
</div>
<div class="contentRight">
Right<br/>
Content<br/>
</div>
This might be fulfill your requirement.
<!DOCTYPE html>
<head>
<style>
.div0 {
text-align: center;
border-style: solid;
border-width: 5px;
height: 50px;
border-color: red;
position: relative ;
}
.div1 {
border-style: solid;
border-width: 4px;
right: 0%;
height: 40px;
width:40px;
border-color: green;
position: absolute;
}
.div2 {
left: 50%;
right:50%;
width:40px;
position: absolute;
border-style: solid;
height: 40px;
border-width: 4px;
border-color: green;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1"><p>div1</p></div>
<div class="div2"><p>div2</p></div>
</div>
</body>
</html>
basically you can achieve this by using the position property and the right and left properties of CSS which you can refer to more on
Position and right property left property could be found on the site.
what i've done in my answer is set the main div as position relative and the other sub divs(div2 and div3) as absoulute
To get one div to the right most corner you set the right property to 0%
and to center a div i used 50% on both right and left properties.
I have a div with width: 180px; and height: 180px;.
How can I center a fontawesome icon horizontally and vertically inside the container?
Note: i may also add text below the icon
<div style="width:180px; height:180px; float:left;">
<i class="fa fa-search fa-4x"></i>
</div>
should look something like this:
Try this:
.centered{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.container{
width:100px;
height:100px;
}
On mobile.
You can do it like this
#search{
background: gray;
width:180px;
height:180px;
float:left;
line-height: 180px;
text-align: center;
vertical-align: bottom;
}
#search > p {
margin-top: -155px;
}
Working example http://jsfiddle.net/kasperFranz/h91p8w4e/3/ (using icon instead of fa in the example, but shouldn't affect the result.)
I'm probably too late here, but it's a common question, so here's a simple working idea, the interesting side of it is that it adapts to the container size:
span{
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
text-align: center;
width: 15px;
height: 15px;
display: block;
}
Asuming to my comment, here is a JSFIDDLE
Without setting relative or absolute
html
<div class="myDiv">
<div class="content_wrapper">
<!--i class="fa fa-search fa-4x">test</i-->
<i class="icon-search icon-4x"></i><br />
<span class="myText">Search</span>
</div>
</div>
css
.myDiv{
width: 180px;
height: 180px;
float: left;
background: #ccc;
text-align: center;
display: table;
}
.content_wrapper{
display: table-cell;
vertical-align: middle;
}
.myText{
font-weight: bold;
font-size: 20px;
}
CSS
/* This parent can be any width and height */
.block {
text-align: center;
background:#ccc;
margin-bottom:10px;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
HTML
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some text</h1>
<p>p1</p>
</div>
</div>
<div class="block" style="height: 200px;">
<div class="centered">
<h1>Some text</h1>
<p>p2</p>
</div>
</div>
<div class="block" style="height: 600px;">
<div class="centered">
<h1>Some text</h1>
<p>p3</p>
</div>
</div>
DEMO
Update 1:
DEMO
I know it's a bit late and you probably already figured this out.
I was able to achieve what you were looking for by wrapping the icon and text in a div then adding padding to that.
See the attached pen.
http://codepen.io/ForTheJim/pen/YPxveR
<p data-height="268" data-theme-id="0" data-slug-hash="YPxveR" data-default-tab="result" data-user="ForTheJim" class='codepen'>See the Pen <a href='http://codepen.io/ForTheJim/pen/YPxveR/'>Centering Icon Question</a> by Jim (<a href='http://codepen.io/ForTheJim'>#ForTheJim</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
Short way just add display: grid; place-items: center; to your div and your ready to go.
like this:
<div style="width:180px; height:180px; display: grid; place-items: center;">
<i class="las la-user-circle"></i>
</div>
I'm trying to convert my website from table layout to div layout,
while with the table layout everything was more intuaitive, I get stuck every minute with this div layout, here's my current problem -
I want the text in my left div to be padded from the left and from the top.
If I pad the left DIV itself, the whole div gets expanded (even though the container div has a 700px width defined for it); If I try to margin the text itself, for some reason it only works for creating the left margin, but it doesn't effect the top margin which stays at 0px.
here's my code:
<div id="container">
<div id="left">I want some padding here
<div id="image">image</div>
</div>
<div id="middle"></div>
<div id="right">
<div id="text">Text</div>
</div>
<br style="clear: left;" />
</div>
CSS:
#container {
border: 1px solid #DCD7D4;
width: 700px;
min-height: 680px;
position: relative;
margin-left: auto;
margin-right: auto;
}
#left {
float:left;
width: 500px;
min-height: 680px;
background-color: #F6F1ED;
}
#left #image {
position: absolute;
left: 27px;
bottom: 40px;
background: green;
width: 375px;
height: 48px;
}
#right {
float: left;
width: 194px;
min-height: 680px;
background-color: #F2EEEF;
}
#right #text {
position: absolute;
left: 523px;
top: 154px;
background: yellow;
width: 150px;
height: 70px;
}
#middle {
float:left;
background: #0C9;
background-image:url(midbg.png);
width: 6px;
min-height: 680px;
}
You can add padding to your #left div together with box-sizing: border-box and the layout should remain in tact
#left
{
padding: x px;
-moz-box-sizing: border-box;
box-sizing: border-box
}
Read up on the CSS box model here: http://css-tricks.com/the-css-box-model/
Padding will affect your overall element's specs.
ALSO, this is a great trick for dealing with funky padding of various elements:
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
How about either of these solutions. They work on my browser:
<div id="container">
<div id="left"><span style="padding-left: 10px; padding-top: 10px">I want some padding here</span>
<div id="image">image</div>
</div>
<div id="middle"></div>
<div id="right">
<div id="text">Text</div>
</div>
<br style="clear: left;" />
</div>
OR
<div id="container">
<div id="left"><div style="padding-left: 10px; padding-top: 10px">I want some padding here</div>
<div id="image">image</div>
</div>
<div id="middle"></div>
<div id="right">
<div id="text">Text</div>
</div>
<br style="clear: left;" />
</div>
if border-box is not working then span should work for you, check this demo
CSS
#left > span {
padding:100px;
position:absolute;
height:100%;
border:1px solid #000;
}
HTML
<div id="left">
<span>I want some padding here</span>
<!-- rest of html -->
`
EDIT
Since, your #left has child divs inside, you can not apply padding option to it.
padding is required on text directly under #left id and not a child div,so, span is suggested as <span> is an inline element and <div> is block level element.
I just have a silly issue (I think...) with a div tag in html.
I want to positionate a background relative image at top left corner, half image outside its container.
Issue is that container doesn't fill to all Its content. I try to use "overflow: auto" property but left corner image turns hidden.
My html:
<div class="content">
content of the page
</div>
<footer id="footer">
<div class="column" id="footer-izda">
<span id="logo-sup"> </span>
<span>conecta con nosotros</span>
<ul>
<li class="twitter">outside of box </li>
<li class="facebook">outside of box</li>
</ul>
</div>
<div class="column" id="footer-dcha">
<div class="module widget_nav_menu deepest">Copyright © 2013</div>
</div>
</footer>
My CSS:
.content{
margin-bottom: 2%;
}
footer{
background-color: #333333;
color: #EDEDED;
padding: 1%;
display: block;
/*overflow: auto;*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.column #logo-sup{
background: url('http://formate21.es/wp-content/themes/master/images/footer.png') left top no-repeat;
width: 26px;
height: 26px;
top: -25px;
left: 0;
float: left;
position: absolute;
}
#footer-izda {
float: left;
width: 50%;
position: relative;
text-align: left;
}
I wrote this on jsfiddle: http://jsfiddle.net/ecXba/10/
Any suggestion?
Put below code just before </footer> tag.
<div style="clear:both;"></div>
Hope this helps!
How would you center position two divs inside a container when one is 'dynamic'? That is, the search input in content-top-search changes width from 226 to 462 when you click inside it.
Here's my CSS code:
.content-top-buttonsearch-holder {
text-align: center;
float: left;
width: 816px;
margin-left: 15px;
}
.content-top-buttons {
height: 31px;
width: 269px;
float: left;
margin-right: 16px;
}
.content-top-search {
height: 31px;
float: left;
}
Here is my HTML:
<div class="content-top-buttonsearch-holder">
<div class="content-top-buttons">
<a id="all_events_button" href="#" title="Click to show all events happening!"></a>
<a id="all_venues_button" href="#" title="Click to show all venues in our database!"></a>
<a id="event_finder_button" href="#" title="Click to search for events!"></a>
</div>
<div class="content-top-search">
<input name="venue-search" class="searchbox" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'sort parties by venue name':this.value;" value="sort parties by venue name" />
</div>
</div>
<div style="border: 1px solid green; margin: 10px;">
<div style="margin: 10px auto; width: 50%; border: 1px solid red; text-align:right">center 1</div>
<div style="margin: 10px auto; width: 80%; border: 1px solid magenta; text-align:left;">center 2</div>
</div>
what's really the 'magic' is the margin-left|right: auto in the inner divs. Also they have to have a width.
edit
This will not work with floats
edit2
Try disabling the float on .content-top-search Maybe that is what you want.
edit3
http://jsbin.com/ukuqas/5 has another solution
there you have a outer container with text-align: center and an inner container with display: inline-block This inner container containes the buttons and the search box. All float is prohibited.