I need to center a glyphicon inside an img-circle div using bootstrap 3. I wrote the following html code :
<section>
<div class="container">
<div class="col-lg-4">
<div class="img-circle center-block">
<span class="glyphicon glyphicon-map-marker glyphicon-aligned-center"></span>
</div>
<p class="aligned-paragraph-address text-center">#123 45678 901 <br/> St NW Pellentesque habitant</p>
</div>
</div>
</section>
In css i write the following code:
.img-circle {
width: 125px;
height: 125px;
background-color: #f5c63b;
}
.aligned-paragraph-address {
padding: 1em;
}
.glyphicon-envelope, .glyphicon-phone, .glyphicon-map-marker {
font-size: 50px;
color: #ffffff;
}
.glyphicon-aligned-center {
top: 35px;
left: 35px;
}
It's working but I do not feel it's the best practice to do that. So I need a help to do it as a professional.
Normally when I need to center things i use margin: 0 auto;
You can also write it as margin-left: auto; margin-right: auto;
But the first solution is less code. If it is text you can try text-align: center;
Good luck. Let me know if this worked for you.
Related
I would like the text to line up nicely with the article-images to the right.
I expect that the .watch-listen-link will have to be altered in order to change align it the right way.
I have tried adding a top-margin property to the class with no results. What should I try next?
.article-side-image{
float: left;
width: 140px;
margin-left: 8px;
margin-right:4px;
margin-top: 8px;
}
.watch-listen-link {
text-decoration: none;
color: black;
font-weight: bold;
font-size: 18px;
}
.watch-listen-link:hover{
color: #1167a8;
}
.side-article {
float: right;
width: 250px;
position: relative;
top: -13px;
}
.no-border{
border-left: none;
padding: 0;
}
.border-right{
border-right: 1px solid #CCCCCC;
}
</style>
body section:
img class="article-side-image" src="images/article3.png">
<div class= "side-article">
<p><a class= "watch-listen-link" href=""> SpaceX rocket explodes during landing </a></p>
<p> <img class="clock" src="images/Clock-image.png"> <span class= "date border-right"> 19 January 2016 </span> <br> <a class="topic-link no-border" href=""> Science & Environment </a> </p>
</div>
What you're trying to build looks a lot like a media object. This pattern is used all over the web.
You probably don't want to use float for this. More recent additions such as CSS grid or Flexbox make creating media objects way, way easier.
I adapted the recipe from the article on media objects I mentioned earlier:
.media {
display: grid;
grid-template-columns: fit-content(200px) 1fr;
grid-template-rows:1fr auto;
grid-template-areas:
"image content"
"image footer";
grid-gap: 20px;
margin-bottom: 4em;
}
.img {
grid-area: image;
}
.content {
grid-area: content;
}
<div class="media">
<div class="img">
<img src="https://mdn.github.io/css-examples/css-cookbook/balloon-sq2.jpg" alt="Balloons">
</div>
<div class="content">
<p>
<a>SpaceX rocket explodes during landing</a>
</p>
<p>
<img class="clock" src="images/Clock-image.png">
<span class= "date border-right"> 19 January 2016 </span> <br>
<a class="topic-link no-border" href=""> Science & Environment </a>
</p>
</div>
I want to do the following:
The biggest Box is a div containing two imgs separated by a small space and with two small block of texts exactly beneath each one.
The problem is that I have been trying (not kidding) for at least 5 hours.
Here is my code:
CSS:
#divPictures {
width: 960px;
position: relative;
float: left;
top: 520px;
left: 200px;
background: url("../imgs/bg-body.jpg");
margin: 0 0 0 -5px;
}
#divPictures img {
margin: 0 0 0 10px;
}
HTML:
<div id="divPictures">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT HERE</p>
<img src="imgs/what-we-do.jpg" alt="">
<p>"AND HERE"</p>
</div>
EDIT:
I can't post images but is a block containing two images one next to the other and text beneath.
Something like this? Quick example, you can obviously add in extra CSS, or float both left and pad/margin etc...
#divPictures{
width: 100%;
background: url("../imgs/bg-body.jpg");
}
.left{
width: 45%;
float:left;
}
.right{
width: 45%;
float:right;
}
.left img, .right img{
margin: 0 0 0 10px;
}
HTML:
<div id="divPictures">
<div class="left">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT HERE</p>
</div>
<div class="right">
<img src="imgs/what-we-do.jpg" alt="">
<p>"AND HERE"</p>
</div>
</div>
Make new divs for images and use css atribute display: inline-block to tell interpreter that you want your divs in a line.
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
div#pic
{
display: inline-block;
width: 200px;
background: url("../imgs/bg-body.jpg");
margin: 5px 0 0 -5px;
}
div#pic img
{
margin: 0 0 0 10px;
}
</style>
</head>
<!-- HTML -->
<body>
<div id="divPictures">
<div id="pic">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT HERE"</p>
</div>
<div id="pic">
<img src="imgs/what-we-do.jpg" alt="">
<p>"AND HERE"</p>
</div>
</div>
</body>
</html>
This is the simplest way... When i get stuck I delete it and start over. I think you would have benefitted from starting over...
CSS
<style>
.caption{
text-align: center;
}
li{
background: #ccd2cd;
float: left;
margin:5px;
list-style: none;
padding:5px;
}
</style>
HTML
<ul>
<li>
<img src="http://omarhabash.com/img/feature1.jpg" alt="">
<div class="caption">caption2</div>
</li>
<li>
<img src="http://omarhabash.com/img/feature1.jpg" alt="">
<div class="caption">caption2</div>
</li>
</ul>
if you dont want to use (li) list then just replace those with div classes and rename the style also to the same.
the way i have it here is a good start to a grid if thats what you are aiming for.
http://jsfiddle.net/Mz6aF/
I'm trying to center 4 divs inside a bigger div with equal margin between them, and it doesn't seem to work.
I've looked at other answers and tried margin: 0 auto but it didn't work for me.
here's the HTML:
<div id="footer_frame">
mail#gmail.com
<span id="phone">044-1234567</span>
<div id="footer_icons">
<div class="icon_div">
<img src="images/youtube.png" alt="Watch our work at our YouTube page" class="icon" />
<p>YouTube</p>
</div>
<div class="icon_div">
<img src="images/email.png" alt="Contact us" class="icon" />
<p>Email</p>
</div>
<div class="icon_div">
<img src="images/googleplus.png" alt="Join our circle # Google+" class="icon" />
<p>Google+</p>
</div>
<div class="icon_div">
<img src="images/facebook.png" alt="Join our Facebook page" class="icon" />
<p>Facebook</p>
</div>
</div>
And the CSS:
#footer_frame {
position: absolute;
background-color: rgba(0,0,0,0.8);
width: 25%;
height: 16%;
top: 83%;
left: 37.5%;
}
#footer_icons {
width: 90%;
clear:both;
margin-top:12%;
}
#footer_icons .icon_div {
display: inline-block;
text-align: center;
font-size: 0.9em;
color: white;
}
#footer_icons .icon_div p {
margin: 0.2em;
}
Now it looks like this, but what I want is that the 4 icons will be centered inside the black div.
Thanks.
Wrap all four inner divs with a single DIV and then set a fixed width and use margin: 0 auto on that one.
When I do things like this I try to use flexboxes as often as possible. The above answer works perfectly but I just thought you might want to try these two options out.
#footerIcons{ display: inline-flex;} .iconDiv{ display: -webkit-flexbox;
-webkit-flex-pack: center;
-webkit-flex-align: center;
}
This should work. For more info visit this link. Before you try to use flexbox in your code make sure you have a ll the right vendor prefixes.
I just started to design a small Webpage to present some designs.
It's a page with 2 columns, with a picture and some text for each.
The problem I have right now: when I add more text to one column, the picture of the other column moves.
Check out my fiddle:
http://jsfiddle.net/JannikS/tMY57
My HTML markup:
<div id="designrow">
<div class="design">
<img src="http://www.webdesign-is-art.com/wp-content/uploads/2008/05/goodbytes-webdesign.jpg" />
<h3>Title </h3>
<p>Short description of our design..</p>
</div>
<div class="design">
<img src="http://www.webdesign-is-art.com/wp-content/uploads/2008/05/goodbytes-webdesign.jpg" />
<h3>Title </h3>
<p>Short description of our design..<br /> but with some more text!</p>
</div>
</div>
and CSS:
.designrow {
float: left; }
.design {
width: 300px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
display: inline-block;
}
.design img{
width: 100%;
height: 100%;
}
you're giving your columns display:inline-block, remove that and float:left instead
heres the fiddle: http://jsfiddle.net/tMY57/3/
I am trying to create a form with multiple rows. Each row has an optional input field followed by a mandatory button. The buttons should line up vertically - something like this:
_____________ _______________
| input 1 | | button 1 |
|___________| |_____________|
_______________
| button 2 |
|_____________|
I tried to float the button left with a fixed left margin, but doing so moves the input field to the right of the button - even though the input field appears first in the markup:
<div>
<input type="text">
<button>Action 1</button>
</div>
Please see my jsfiddle here. Why is this happening and what's the correct solution?
You need thee div container to do this as shown in this jsFiddle.
HTML Code
<div class="container">
<div class="left">
<button>
</div>
<div class="right">
<button>
</div>
</div>
CSS Code
.container {
width: 190px;
height: 22px;
margin: 0;
}
.left {
float: left;
width: 95px;
height: 22px;
}
.right {
float: right;
width: 95px;
height: 22px;
}
Use rows.
<div class="row-rap">
<div class="right">
<input type="text">
</div>
<div class="left">
<input type="button" value="Action 1">
</div>
</div>
<div class="row-rap">
<div class="right">
<input type="text">
</div>
<div class="left">
<input type="button" value="Action 2">
</div>
</div>
With the following styling.
div.row-rap {
width: 100%;
}
div.row-rap .right, div.row-rap .left {
width: 50%;
float: left;
}
Here's an alternative, the margins and colors may need modification. See jsfiddle link for sample result.
It has a left-aligned label and right-aligned input (button style) in a div, for each line. The non-breaking space is needed as a placeholder in the span element that represents an "empty label".
http://jsfiddle.net/qallar/kfgCb/5/
The html is:
<div class='line'>
<span class='formlabel'>label 1</span>
<input class='formbutton' type='button' value='button 1 text ' />
</div>
<div class='line'>
<span class='formlabel'> </span>
<input class='formbutton' type='button' value='button 2 text' />
</div>
and the css:
.line
{
display: block;
background-color: #ddd; /* also try #fff */
margin: 0px;
padding: 2px;
height: 30px;
width: 200px;
}
.formlabel
{
float: left;
background-color: #eee; /* also try #fff */
margin: 0px;
padding: 2px;
width: 75px;
height: 100%;
clear: both;
}
.formbutton
{
float: right;
background-color: #0f0;
margin: 0px;
padding: 0px;
width: 100px;
height: 100%;
}
The input field is flying to the right of the button because it is an inline element. Float works on block elements only, inline elements will always flow around the floated elements. This explains the behavior in the original jsFiddle.
Having said that, even if I put display:block on the input element it still behaves like inline. I was able to make the basic concept work for a div though, which is a true block element. See the jsFiddle here.
<div class="row">
<button>Action 1</button>
<div class="in"></div>
</div>
.row {
clear: both;
}
.in {
background-color: green;
height: 24px;
width: 100px;
}
button {
float: left;
margin-left: 110px;
width: 150px;
}
The only workaround seems to be the one offered by Musa (see this jsFiddle) where he aligns the buttons to the right using text-align and limiting the width of the div.
I am not a CSS expert and usually this task works for me using table
<table>
<tr><td>Optional Input</td><td>Button</td></tr>
<tr><td>Optional Input</td><td>Button</td></tr>
</table>
if table by some reason is not an option you can use div/span
<div style="display: table-row">
<span style="display: table-cell">Optional Input</span>
<span style="display: table-cell">Button</span>
</div>
It will about like this
using Block formatting context https://developer.mozilla.org/en-US/docs/CSS/Block_formatting_context
jsfiddle code: http://jsfiddle.net/EeNFH/9/
the html code:
<div class="inp">
<input type="text">
</div>
<div class="btns">
<p><button>Action 1</button></p>
<p><button>Action 2</button></p>
</div>
and the styles:
input {
width: 100px;
}
button {
width: 150px;
}
.inp{
float:left;
}
.btns{
overflow:hidden;
}