.floral-icon {
vertical-align: middle;
float: left;
}
<div id="heading">
<div id="colD"><p><img class="floral-icon" src="_images/pg_p_lewis_icon.png" alt="floral icon" width="32" height="32"></p></div>
<div id="colE"><p>Lewis</p></div>
<div id="colF"><p><img class="floral-icon" src="_images/pg_p_lewis_icon.png" alt="floral icon" width="32" height="32"></p></div>
</div>
I am trying to align an icon on both sides of a single word heading. I want it to align in the middle vertically and on the right side to the left of the heading and on the left side to the right of the heading, so that the icon abuts up to the heading on either side. When I leave off the float property to align it left or right, the icon lines up correct vertically. When I add the float the icon jumps up to the top and is not aligning correctly in the vertical position. What am I doing wrong? Thanks.
forget about float and vertical align, it's an old tricks. try the flex, it's a new one.
put a wrapper before your icons and set display flex.
this is some simple example from me, you should improve it by your self
.wrap{
width:100%;
height:250px;
background:yellow;
display:flex;
align-items:center;
justify-content:flex-end;
flex-direction:row;
}
.icons{
width:50px;
height:50px;}
.icons img{
width:100%;}
<div class='wrap'>
<div class='icons'><img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/blue-metallic-orbs-icons-natural-wonders/050386-blue-metallic-orb-icon-natural-wonders-flower9.png"></div>
<div class='icons'><img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/blue-metallic-orbs-icons-natural-wonders/050386-blue-metallic-orb-icon-natural-wonders-flower9.png"></div>
</div>
you can find it more in this link css Tricks
wish, it would help you out. ask me more, if you still don't get it.
Related
I have a fixed width div with centered text
--------Centered Text--------
I would like to append another div that has right aligned text right before the centered div.
This is Centered Text------
EDIT:
I updated the jsfiddle code so it isn't left in such a disoriented state.
I was trying many different approaches and ended up posting a messy example. The code below shows what I am trying to do.
<div class="text-entry" style="
display:flex;
justify-content: center;
background-color:grey;
">
<div style="display:inline-block; width:100px; text-align:right; background-color:red;">My-</div>
<div style="background-color:white; ">Text</div>
<div style="display:inline-block; width:100px;"></div>
</div>
<!--- ------------------- -->
<div class="text-entry" style="background-color:grey;text-align:center;">
<div style="display:inline-block; background-color:white; ">
Text
</div>
</div>
My question is what is the proper way to implement this instead of using two inline-blocks of fixed width?
*Excuse my lack of skills. I am doing this as a hobby and not professionally. Thank you for the help. I have googled before coming here.
I have searched many threads here but could not find something more peculiar to my needs. I have a logo image 50x50px and h2 text element. I want to keep both elements side by side but in the absolute center of my header. I have tried various CSS techniques but cannot get it done. Below is simple bootstrap structure that I am trying to use:
<div class="container">
<div class="row">
<div class="col-md-12"><img src="https://placeimg.com/50/50/nature" alt="LOGO">
<h2>FOUR SEASONS INTERNATIONAL (PVT) LTD</h2></div>
</div>
</div>
Use this css
img + h1{
display: inline-block
vertical-align: middle;
}
remove positions whatever you added use only margin,padding, top, left, right bottom and use center tag after col-md-12 put both img and heading inside the center tag and also add class col-sm-12
Maybe you are looking for display:flex with align-items:center
.test{
display:flex;
align-items:center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12 test"><img src="https://placeimg.com/50/50/nature" alt="LOGO">
<h2>FOUR SEASONS INTERNATIONAL (PVT) LTD</h2></div>
</div>
</div>
I have been trying out with div overflows. And I am encountering the problem that the div is not displaying 'normally'. This is a simple HTML and CSS and I hope someone can explain me the problem?
I was expecting that the boxes to be displaying in the same line.
<div class='content'>
<div class='box'>
hihi
</div>
<div class='box'>
</div>
</div>
...
http://codepen.io/ycmjason/pen/xbXpmV/
You are missing vertical-align: top; property on box class.
It should be:
.box{
display:inline-block;
**vertical-align: top;**
width:50px;
height:50px;
margin-left:15px;
background: #55CC55;
}
The default vertical align value for a div is baseline, this means, the box moves to the bottom as soon as you write text in it. If there's no text, there is no baseline to be aligned to, so they just hop on the top. To fix it add vertical-align: top; to your .box.
I would like to make a simple panel with buttons that are placed horizontally and aligned to the right. Willing to align it to the left I can easily do this like that :
.button {
float:left;
background-color: #55cc66;
margin-right: 50px;
padding: 5px;
}
//......
<div id="switcher">
<h3>Style Switcher</h3>
<div class="button selected" id="switcher-default">
Default
</div>
<div class="button" id="switcher-narrow">
Narrow Column
</div>
<div class="button" id="switcher-large">
Large Print
</div>
</div>
But when I do the same with float:right it obviously aligns it to the right but in inverted order. I have also tried text-align: right, position: absolute; right:150; and position: fixed; right:150;. The last two align to the right but awkwardly overlap the 'buttons'.
How can I achieve this then ?
You can remove floats and align the container of your "buttons" to the right with the property text-align.
You don't want your heading to be aligned to the right so you've to cancel it with text-align: left;.
One problem remains: you're using non-semantic div when what you really want are buttons. You should use ... button elements (or maybe input[type"button|image|submit"]).
These ones are focusable and are made for an action taking place when clicked (with mouse, keyboard or tap).
Back to these div: they are displayed as blocks by default, you've to change for inline-block - IE8+.
Fiddle: http://jsfiddle.net/PhilippeVay/YZaRW/
Leave the class .button with float left, wrap all your buttons with another division (btn_wrapper) and add a specific width to it and float right. Just make sure that all your buttons fit inside the wrapper
.btn_wrapper{
width:300px;
float:right
}
<div id="switcher">
<h3>Style Switcher</h3>
<div class="btn_wrapper">
<div class="button selected" id="switcher-default">
Default
</div>
<div class="button" id="switcher-narrow">
Narrow Column
</div>
<div class="button" id="switcher-large">
Large Print
</div>
</div>
</div>
I am having trouble making the <h2 class="feature_description_content"> vertically align with the image to it's left. You can see that it's quite a bit lower than the top of the image, and I can't seem to find the css that is responsible for it.
Here's an image:
Here is the code:
<div class="feature feature-item-248">
<img class="main" src="http://www.bolistylus.com/wp-content/uploads/uclaproduct.png" alt="" /></p>
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">PERFECTLY WEIGHTED</h2>
</div>
<div class="feature_description_content">
<p>Touch screens have simplified technology, but there has yet to be a way to capture the precision of a calligrapher or the stroke of an artist. Not only should it meet your needs, but a stylus should have style.</p>
</div></div>
</p></div>
Thanks
This issues is must be due to default margin and padding of default HTML elements you must try out by setting
h2
{
margin:0px;
padding:0px;
}
and then change padding as required
Set its margin-top: 0; - simple :)
The image suppose to be floated to the left and cleared both ways, so text can be aligned properly...
img .main {
float: left;
clear: both;
}