This question already has answers here:
Align child elements of different blocks
(3 answers)
Closed 2 years ago.
I have 4 pictures that I wish to align, the issue I have is that they are not in the same div and I cannot find a responsive solution.
Depending on the size of the screen, the text may take up to 3 lines and I would like for all of the logos to adapt simultaneously even if their own text does not have as many lines.
This is what I currently have :
The logos are what I would like to align.
This is the HTML :
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="buffer"></div>
<p class="text-center">Mon LinkedIn</p>
<a class="image-link" href="link1">
<img class="image-link img-size" src="assets/img/contact/LinkedIn-Logo.png">
</a>
</div>
<div class="col-sm-3">
<div class="buffer"></div>
<p class="text-center">Mon profil Malt</p>
<a class="image-link" href="link2">
<img class="image-link img-size" src="assets/img/contact/logoMalt.png">
</a>
</div>
<div class="col-sm-3">
<div class="buffer"></div>
<p class="text-center">Mes projets open source</p>
<a class="image-link" href="link3">
<img class="image-link img-size" src="assets/img/contact/so-logo.png">
</a>
</div>
<div class="col-sm-3">
<div class="buffer"></div>
<p class="text-center">Mes contributions open source</p>
<a class="image-link" href="link4">
<img class="image-link img-size" src="assets/img/contact/GitHub_Logo.png">
</a>
</div>
</div>
</div>
And this is the CSS :
.image-link {
display: block;
margin-left: auto;
margin-right: auto;
}
.img-size {
max-width: 100px;
max-height: 20px;
}
.buffer {
padding-top: 40px;
}
I did try to put the text and the logos in different rows but even though it yields a good result on big screens, it does not on small screens ( the text gets separated of the logo )
position your link at the bottom will do the trick for you
.image-link {
position:absolute;
bottom:0;
}
and you can set the max-height for your text container if you want
You can adjust the height of the text (paragraph tag) by auto. If don't help done it by changing auto to 20% - 40%, depending on the size of the screen. You have to check the maximum height but I think 30% would be sufficient according to the text.
.buffer p {
height = 30%
}
Related
I would like to align some icons and some text in a nice grid like fashion.
The text needs to be centerd under the second icon.
It would have to look like this.
____ ____ ____
| | | | | |
|ICON| |ICON| |ICON|
|____| |____| |____|
TEXT
Is there any easy way to achieve this?
create a row div and give it 100% width and float left and inside this div create 3 div as a col div and give each 33% and float left and place your icon inside these div..now create another row width 100% float left now place p tag inside it and style this p tag text-align:center now you will see your text always below 2nd icon img....
<div style="width:100%;float:left;">
<div style="width:33%;float:left;">
<img src="your source" />
</div>
<div style="width:33%;float:left;">
<img src="your source" />
</div>
<div style="width:33%;float:left;">
<img src="your source" />
</div>
</div>
<div style="width:100%;float:left;">
<p style="text-align:center;"> You Text Here..</p>
</div>
Create a class that controls the size of each of the areas that hold your icons. As a sample i just used px but if you want it responsive then i would suggest that you use %. With a holder for each icon you can easily add text below, this will then stay nicely aligned.
Sample code snippet:
.pull-left {
float: left;
}
.icon-box {
width: 100px;
text-align: center;
}
.icon {
width: 60px;
height: 60px;
border: 1px solid;
margin: 0 auto;
display: block;
}
<div class="icon-box pull-left">
<div class="icon">ICON</div>
</div>
<div class="icon-box pull-left">
<div class="icon">ICON</div>
<p>Text</p>
</div>
<div class="icon-box pull-left">
<div class="icon">ICON</div>
</div>
you can do it quite easily. You need to use list item & display inline with text center property. Like below code -
HTML portion
<div id="test1">
<ul>
<li>
<img src="" alt="num1">
</li>
<li>
<img src="" alt="num2">
<br/>
121
</li>
<li><img src="" alt="num3"></li>
</ul>
</div>
CSS for it
#test1 ul li {
display: inline;
list-style: none;
float: left;
padding: 0;
text-align:center;
}
Have you heard from bootstrap 3 ? It has a lot of features that help you with responsive alignment.
An example of this would be :
<div class="row">
<div class="col-md-4 text-center">
<img src="my-picture.jpg" class="img-responsive" />
</div>
<div class="col-md-4 text-center">
<img src="my-picture.jpg" class="img-responsive" />
</div>
<div class="col-md-4 text-center">
<img src="my-picture.jpg" class="img-responsive" />
</div>
</div>
One way I could think of is to create 3 container (for example 3 divs) with a css property on width (let say 33% width each, or something smaller if you need to add margin (you could even use px not %, but I recommand % for responsivness) with a float left property. Those divs will contain the icons, then you create another 3 icons with the same propreties that will display under the icons. Now you just have to put the text in the center one with text align center and that's it. You gave us few informations so I can't help you better than this.
Here you have an example of what I meant, you just need to implement it by your needs.
html:
<div class="container">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="text_empty"></div>
<div class="text"></div>
<div class="text_empty"></div>
css:
.container {width: 100%;}
.icon {width:33%; float: left; }
.text_empty {width:33%; float: left; }
.text {width:33%; float: left; text-align:center; }
Hy. I work with 960gs (12 columns) and I try to put the title after the logo in the bottom part of it. The solution I find doesn't work too good because it place the title under logo.
HTML:
<div id="header" >
<div class="container_12">
<header>
<div class="grid_4">
<a href="index.html" title="Pagina principala - CRCE" rel="home">
<img src="images/CRCE_logo.png" alt="logo CRCE"/>
</a>
</div>
<div id="titlePosition"class="grid_10">
<a href="index.html" title="" rel="home">
<img src="images/titlu_crce.png" alt=""/>
</a>
</div>
</header>
</div>
</div>
CSS:
#header{
background: #798AF7;
background-repeat: repeat-x;
height: 205px;
overflow: visible;
border-bottom: 30px solid #37459D;
display: block;
}
#titlePosition{
position: bottom;
}
The logo is on 4 columns and the title on 10 columns. Also I will put the language chooser(selector) and FB logo in the right top so I think that's a challenge. I've attached an image for details too, see how I want to look at the final header
I don't think you can use the columns in that fashion, it should sum to 12.
Because the logo from first Column overlaps on the second. Make your logo column as just 2 cols and have your title as 10 cols.
<div class="grid-container">
<div class="grid-2 logo-wrapper">
<img class="logo" src="logo.jpg">
</div>
<div class="grid-10">
<!-- Look how the grids can be nested further-->
<div class="grid-container">
<div class="grid-10 text-right"> Language selector</div>
<div class="grid-10 text-right"> Facebook </div>
<!-- You can use top margin -->
<div class="top30px grid-12"> Title</div>
</div>
</div>
</div>
Now set the logo image to absolute position
.logo
{
position:absolute;
left:0;
right:0;
}
Then for the parent around the .logo set it to relative.
.logo-wrapper
{
position:relative;
}
I have given my solution considering pseudo grid system, because i haven't used 960gs - grid system.
General Idea:
You can consider that following 3 element are in different rows occupying 10 columns
language selector
Facebook icon and
Site Title
Tips:
Avoid absolute position for Title as you can achieve it through
nested grids as shown in the above HTML
Use top margin to push the
title further below to the required position.
I'm having an issue with centering within a Bootstrap column. I had a placeholder page using images (a white box with an image and text inside), that I needed to change to a square white div with the image added inside and the text manually added.
When I implemented it the 2nd way, all of a sudden my columns lost there centering.
Here are the codepens for the centered one and the uncentered one.
Uncentered relevant HTML:
<div class="col-xs-4 column-centered">
<a href="../faq/category_3.html">
<div class="img-with-text">
<img src="img/Blue/VideoCollaboration-Blue.png"></img>
<p><b>Video Collaboration</b></p>
</div></a>
</div>
Centered relevant HTML:
<div class="col-xs-4 column-centered">
<div class="img-with-text">
<img src="img/temp_image.png" alt="VideoCollaboration" />
</div></div>
I'd really like to avoid using offsets as that isn't really centering..
try
.img-with-text{
display: inline-block;
}
or
.img-with-text{
margin: 0 auto;
}
That's because anchor tags are inline-block by nature, you will have to change it to block and do the following.
<div class="col-xs-4 column-centered">
<a href="../faq/category_3.html" class="block text-center">
<div class="img-with-text inline-block">
<img src="img/Blue/VideoCollaboration-Blue.png"></img>
<p><b>Video Collaboration</b></p>
</div>
</a>
</div>
.inline-block{
display: inline-block;
}
.block{
display: block;
}
im making a container that contains 3 images and three "text bits"
My problem is that I cant seem to get the text to appear on the right side of each image.
Here a SS: http://imgur.com/ujBIjYC
The html:
<div class="textandimg">
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/caprocatforside.png" alt="caprocatforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/granhotellforside.png" alt="granhotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>
and the css:
.textandimage{
clear:both;
}
.image{
float:left;
width: 100%;
margin-left: 10px;
}
.text{
float:left;
}
If I put :
.text{
float:right;
}
The text appears on the right side. But its still inline with the picture. And I want the text to be side by side.
Appreciate any help. Thanks.
If your div with image class has setted width: 100% it take 100% of the width. So you can remove it or set to an value in "px".
Delete all that CSS and just put this:
.image{
float: left;
margin-left: 10px;
}
All you want is just to float the images to the left of the text divs, so that's all you need.
http://jsfiddle.net/M8CQD/
Edit: From your comment, it also looks like you need to put each image and text div together in a div in order to push the images down below the preceding image.
<div class='row'>
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>
I'm a visual designer, so this may seem a silly question (and at one point, this wasn't broken!) but I'm stuck. I'm trying to get images to appear in a responsive row with a mouseover.
Can anyone help? I know the code is jacked; I've been struggling with the order of the divs. The mouseover is working, BUT the images are now stacking and aren't appearing in a row anymore. They're outside of the col-lg-4 container, but I've included that. What am I missing?
*image is FPO
/// HTML:
<div class="col-lg-12">
<div class="highlight">
<h3>LOREM IMPSUM DOLAR</h3>
<h5>The fox and the rabbit.</h5>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<figure class="cap-left">
<div class="thumbnail">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/T_Roosevelt.jpg/473px-T_Roosevelt.jpg" alt="">
<figcaptions><h4>Please let this work</h4></figcaptions>
</div>
</figure>
</div>
</div>
<div class="col-lg-4">
<figure class="cap-left">
<div class="thumbnail">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/T_Roosevelt.jpg/473px-T_Roosevelt.jpg" alt="">
<figcaptions><h4>Please let this work</h4></figcaptions>
</div>
</figure>
</div>
</div>
/// JSFiddle:
http://jsfiddle.net/zvcNa/
This is due to your padding: 30px 40px; for figcaptions{}.
figcaptions is 100% width and height, but add your padding to this size.
Remove this padding and add it to your figcaptions children :
figcaptions h4{
padding:30px;
}
FIDDLE
EDIT #1:
Replaced :
figure {
display: block;
position: relative;
}
.col-lg-4 {
display:block;
float:left;
}
FIDDLE