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!
Related
guys i have a problem trying to get two texts stick to the left and right of a container
I use the following
<h4>Better Tri-Blend T-Shirt</h4>
<span style="float: right ">£4 </span>
This looks like this
As you can see it works sorta with both aligned to left and right but the font size on the right is smaller than the left and not the same
How do I make the right font bigger (eg h4) or even bigger
I have tried covering in a h4 but that knocks out the right alignment
Amy help appreciated
Mark
Is this what you want?
Heading(h1, h2, h3..) are block elements, which means that they occupy full width.
Their font sizes are fixed and are defined by the browser, unless overridden by style-sheets.
To make 2 or more heading align with each other, make them display: inline; or display: inline-block;
Optionally you can use vertical-align:middle; to vertically center them if they are of different sizes.
h4,h2 {
display: inline-block;
margin-right:10px;
vertical-align:middle;
}
<div>
<h4>Better Tri-Blend T-Shirt</h4>
<h4>£4 </h4>
</div>
<br/>
<br/>
<div>
<h4>Better Tri-Blend T-Shirt</h4>
<h2 style="float:right">£4 </h2>
</div>
Simply insert the span inside the h4:
<h2>Better Tri-Blend T-Shirt<span style="float:right; ">£4</span></h2>
I already did some research but I couldn't find an answer.
I would like my paragraph on the 'about page' to stop at a certain width when I exceed the browsers width. But when I apply a width or a max-width the paragraph just sticks to the left side of the page. Can someone help me with this issue?
<div class="container-fluid">
<section>
<img src="img/Florian.jpg" alt="Florian" class="profilephoto">
<div class="aboutme">
<h3 class="text-center">About</h3>
<p class="text-center primary">Blablabla</p>
</div>
</section>
</div>
The paragraph should remain in the center of the page and the line width should not exceed a certain width.
You can use margin:auto on the paragraph together with a width / max-width. That will center it.
.aboutme p {
max-width: 80%; /* or your chosen width */
margin: auto;
}
JSfiddle Demo
I have a page which looks like this:
Content contains a static table of fixed width (determined by content) inside a centered div. Below content there is a div that contains a line of text and an image below that text. It is meant to float on the left of the Content. The page and image has max-width and max-height. But when page is resized, Image shrinks twice slower than the page. This causes the page to look like this:
I want Image to always be filling the most of that white gap on the left. When the page is resized, the Image should also resize accordingly.
http://jsfiddle.net/FZ4KG/
Html:
<section align="center">
<h4 align="center">Heading</h4>
<div align="center">
<table>Content</table>
<div id="image_box">
<p align="left">Text above image</p>
<img src="img.png" id="image">
</div>
</div>
</section>
Css:
#image_box {
padding-left: 15px;
height: 0px;
top: -75px;
position: relative;
}
#image {
float: left;
max-width: 20%;
}
A few things before I'm able to fully comprehend what it is you're looking for.
It's strange how you're using the HTML5 <section> tag with a deprecated, and as of HTML5 removed, align attribute. And still strange the use of an inline style when using css on those elements.
I will assume you're looking to center those elements within their parent containers. To achieve this, you would need to use a set width and set the horizontal margin of the element to auto.
div {
margin: 0 auto;
}
You also have a typo in your mark up. The DIV id says imabe_box. Assume it's supposed to be image_box.
<div align="center">
<table>Content</table>
<div id="imabe_box"> // ID should be set to 'image_box'
<p align="left">Text above image</p>
<img src="img.png" id="image">
</div>
</div>
Please add more code or reply to the answer and we can help you further.
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 have two divs on a page with the same height position. I'm trying to make them expandable, allot like what goes on in the WordPress dashboard area:
Now i've got the left div to expand but only with the right div staying at the same width. I need both to expand on zooming in and out.
any ideas how this is done?
I've been looking it up for the past hour but i cant find anything.
A link to a tutorial would be cool (good luck finding one).
EDIT:
Here guys, i found something similar: http://jsfiddle.net/Khez/2zLPF/embedded/result/
do you see how the two divs side by side expand? the green and blue ones...
If you want your divs to dynamically change depending on the width of their container, set the widths using percentages:
HTML:
<div class="column">
<div class="wrapper">
<p>Text</p>
</div>
</div>
<div class="column">
<div class="wrapper">
<p>Text</p>
</div>
</div>
CSS:
.column {
float: left;
width: 50%; }
.column div { margin: 0 20px; /* Set the spacing between the cells */ }
Preview: http://jsfiddle.net/Wexcode/F7h2C/
NOTE: Because you are setting the combined widths of the columns to 100%, you cannot add padding to .column if you want them to be on the same line. The inner div wrapper will allow you to add spacing between your two columns. You should apply all background attributes to .wrapper.