Hi have the following code appneded three times:
<div class="bio">
<div class="bio-icon"><img src="/images/icon_location.png" alt="Location" /></div>
<div class="bio-content">
<div class="bio-title">location:</div>
<div class="bio-text">' . $obj[0] . '</div>
</div>
</div>
In each case, the image inside bio-icon div is different (it is different width and height).
Basically, there would be an icon, with a text next to it. I want the text to be centered (vertically), but I don't know what to do since the icons each have different heights! What should I do?
Thanks
You can try this
.bio {
display:table;
}
.bio-icon, bio-content {
display:table-cell;
vertical-align:middle;
}
The only problem with this is IE7 doesn't recognize css table properties so you might have to use jquery to fix in IE7
you can use vertical-align property to center the text vertically w3 link here
For different size icon issue, use fixed width and height in css
.bio-icon
{
height:50px;
}
This will automatically resize your icon/image.
Related
It's very simple. I just need to put two lines of text on either side of an image which is centered on my landing page. I don't know how to make it responsive except for using position: absolute. How can I do this without having to use position: absolute.
I tried using flexbox but it seems like it won't let me adjust the position of my text freely as the items are literally adjacent to each other.
Here's the code employing flexbox:
<div class="overall">
<div class="hi">
<p>OH <br>GOSH <br> HI!</p>
</div>
<div class="human-container">
<img src="img/landing page human.svg" onmouseover="this.src='img/landing page human 2.svg'"
onmouseout="this.src='img/landing page human.svg'">
</div>
<div class="my-name">
<p>MY<br> NAME<br> IS <span class="Ray">Ray</span></p>
</div>
</div>
I would go simply by following these steps:
- Add "float: left;" to the following classes: ".overall", ".hi", ".human-container" and ".my-name".
- Add an id(#) to the img and give-it a float:left; and a width:100%; too.
- Give to class ".hi" a width: 5%;
- Give to class "human-container" a width:90%;
- Give to class "my-name" a width:5%.
This should do it.
:D
I have 4 icons that align horizontally. However I would like to have them align with each other through a center line if that makes sense. At the moment they aren't matching up. The top of one image may be in line with the middle of another for example. The icons are of different sizes but I don't mind that, as long as the align centrally. Here is my html
<section class="feature">
<div class="grid_4">
<img src="images/image-1.png">
<p>
Email
iamapdige#<br>hotmail.com
</p>
</div>
<div class="grid_4">
<img src="images/image-2.png">
<p>
Mobile<br>
Call or text 085PIDGEON
</p>
</div>
<div class="grid_4">
<img src="images/image-3.png">
<p>
Facebook<br>
Check us out on Facebook!
</p>
</div>
<div class="grid_4">
<img src="images/image-4.png">
<p>
Twitter<br>
Tweet me! #pidgeon
</p>
</div>
</section>
And the relevant CSS
.feature {
margin-top: 70px;
font-size: 15px;
font-family: sans-serif;
}
.feature img {
float: left;
margin-right: 6px;
}
Thanks for any help. If it's not clear what I mean then I can upload a picture of the PS template to explain.
If the icons are all different widths but you want them all centered on top of each other, try putting the images in spans. Set the width of the spans to be the width of the widest icon, and use text-align:center on them.
Check this JSFIDDLE
Basically, you need to adjust the margins inside, and make the bordering container that i added equal to the sum of the widths and margins of the grid_4s.
so:
.feature{
width:600px;
margin:auto;
}
.grid_4{
width:100px;
margin:25px;
}
What the margin auto does is that is adjusts its margins automatically within section's width of 100%. the margins auto-position itself in the center based on the width of the container feature. therefore if you want your images central and aligned horizontally, then they need to perfectly equal the width of the feature div, so add up the width and margins (horizontally) and come with the answer as the width of feature, if you follow...
hope this helps!
How can I achieved aligning of N contiguous divs horizontally with a wrapper whose width is 'auto'?
like:
.boxes{ width:200px;height:200px;float:left; }
<div id="wrapper" style="width:auto;">
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
. . .
</div>
I tried applying display:inline; and display:inline-block; on wrapper but boxes goes into new y after it reaches the browsers/display width?
But setting document's width into fixed will solve the issue but its not what I want.
Also I can easily achieved this using tables but I don't want to do it because my code will look messy and will be hard for me to maintain.
Add
#wrapper
{
white-space: nowrap;
}
and on your boxes class: change float:left to display:inline-block;
FIDDLE
This will keep your boxes from wrapping.
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;
}
I would like to vertically align some text and an image in a CSS box.
I tried several methods, here is the code for the last one I tried called "display:table-cell-method"
<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;">
2:38<img src="images/stopwatch-button-play.png">
</div>
Here is a screenshot of the result in the newest version of Firefox: http://screencast.com/t/Yzg2MzAzNW
The image is centered correctly, the text is only centered nearly correctly. It sits at the baseline of the image. Why?
vertical alignment is thoroughly misunderstood. Have you read this?
as for why the text sites at the baseline of the image, it is because the image and the text are both in the flow of the div. they will not overlap. to have the text centered too (implying it lies over the image), you will have to put the text into a div or a span and adjust its positioning (set it to relative and experiment with left and top).
Cheers
change the following
<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;">
2:38<img style="vertical-align:middle" src="images/stopwatch-button-play.png">
</div>
You can use the background-position property.
it looks like this.
background: url(path/to/image.whatever) top; //aligns it to the top.
you can even do something like top left or top right etc.
w3schools has everything you need to know about backgrounds.
If your text is only one line high, you can set line-height to the height of your image. It will center the text vertically. Then position:absolute on your image will prevent it from disturbing the positioning of the text in the div:
<div style="border-color:blue; height:200px; ">
<div style="line-height:30px;margin-top:85px">2:38<img style="position:absolute" src="images/stopwatch-button-play.png"></div>
</div>