I am centering an image using bootstrap's center-block class.
<section class="container">
<a href="www.apple.com">
<img class="center-block" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</section>
The only problem is that the links spans the width of the container. How do I restrict the URL to the image?
Working JSFIDDLE
You have to add a container for your image and link to sit inside besides just a section tag. In This way you don't have to modify the container class and you introduce a div to organize and style as you wish. Here is the working code:
<section class="container">
<div style="width:150px;margin-left:auto;margin-right:auto;">
<a class="center-block"href="www.apple.com">
<img class="center-block" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</div>
</section>
Try wrapping another element around your <a> and <img> tags and explicitly centering it via text-align: center; or Bootstrap's text-center class :
<section class="container">
<!-- You can use Bootstrap's text-center class a style="text-align: center;" here -->
<div class='center-block text-center'>
<a href="www.apple.com">
<img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</div>
</section>
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Centered Apple Logo</title>
</head>
<body>
<section class="container">
<div class='center-block text-center'>
<a href="www.apple.com">
<img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;" />
</a>
</div>
</section>
</body>
</html>
The link is an inline element so just use text-center on the container instead..
<section class="container text-center">
<a href="//www.apple.com">
<img class="center-block" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</section>
http://codeply.com/go/bLOmNY1pQZ
If you're referring to the link, as in hovering over any section of the .container will activate the link, rather than just the image, here's the solution:
.container {
text-align: center;
}
.container a {
display: inline-block;
}
This basically gives the link its own dimensions, so it doesn't stretch to fill the parent.
Related
Here's my code in html:
<div id="pictures">
<div class="pic1">
<img src="something.jpg" width=200px; height=200px"
</div>
<div class="pic2">
<img src="something.jpg" width=200px; height=200px"
</div>
</div>
I want to put these two pictures on the same line.
The only thing that worked was when i changed 'div' class into 'span' class, then the two pics appeared next to each other, but then i couldn't put any space in between them no matter what i tried.
Can somebody please tell me what is wrong with my code?
Just get rid of the inner <div>s. <div>s (and their contents) always appear in different lines because they are block-level elements.
<!DOCTYPE html>
<html>
<head>
<title>nanda</title>
<link rel="stylesheet" type="text/css" href="nandacss.css" />
</head>
<body>
<p style="color: red;">Pick one</p>
<div id="pictures">
<img src="//via.placeholder.com/200" width="200px" height="200px">
<img src="//via.placeholder.com/200" width="200px" height="200px">
</div>
</body>
</html>
Try using single div for both image
<!DOCTYPE html>
<HTML>
<head>
<title>nanda</title>
<link rel="stylesheet" type="text/css" href="nandacss.css" />
</head>
<body>
<br>
<p style="color:red">Pick one</p>
<div id="pictures">
<div class="pic1"> <img src="//via.placeholder.com/200" alt="Trulli" width=200px; height=200px />
<img src="//via.placeholder.com/200" alt="Trulli" width=200px; height=200px> </div>
</div>
</body>
</html>
.pic1,
.pic2 {
display: inline-block;
}
You can then add your spacing between the elements too.
Run Code Snippet to see CSS aligning the two images:
.pic1,
.pic2 {
display: inline-block;
}
<p style="color:red">Pick one</p>
<div id="pictures">
<div class="pic1"> <img src="something.jpg" width=200px; height=200px" /> </div>
<div class="pic2"> <img src="something.jpg" width=200px; height=200px" /> </div>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I want to display three images in a single so i have written css for that to display images in a single row and center of the block but the problem is one of the image is going slight up.If i write css for that to display at same height it is moving all the three divs.Here is the code for that.
.member1 {
width:250px;
height:200px;
display:inline-block;
margin-right:30px;
}
.member1 + .member1{
width:250px;
height:200px;
display:inline-block;
margin-right:30px;
}
.member2{
width:250px;
height:200px;
display:inline-block;
margin-right:30px;
}
.member-details {
width: 100%;
text-align: center;
}
<div class="member-details">
<div class="member2 clearfix ">
<figure> <img src="http://server.com/bar/image01.png" class="member-image" width="222" height="222"> </figure>
<div class="overlay4">
<div class="overlay3">
<h5>Sr. Advocate </h5>
<p>fgh</p>
</div>
</div>
</div>
<div class="member1 ">
<figure> <img src="http://server.com/bar/image03.png" class="member-image" alt="" width="222" height="222"> </figure>
<div class="overlay4">
<div class="overlay3">
<h5>Advocate </h5>
<p>abc</p>
</div>
</div>
</div>
<div class="member1 ">
<figure> <img src="http://server.com/bar/image02.png" class="member-image" alt="" width="222" height="222"> </figure>
<div class="overlay4">
<div class="overlay3">
<h5>Advocate Member</h5>
<p>XYZ</p>
</div>
</div>
</div>
</div>
Okay, Use bootstrap, and you will able to do design, without any problem,
So i write following code, which may help you have a look.
and this is link of jsfiddle:https://jsfiddle.net/dupinderdhiman/7b5dzp9o/9/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<div class="row">
<div class="col-4"><img src="https://www.gstatic.com/images/branding/product/2x/photos_96dp.png"></div>
<div class="col-4"><img src="https://www.gstatic.com/images/branding/product/2x/photos_96dp.png"></div>
<div class="col-4"><img src="https://www.gstatic.com/images/branding/product/2x/photos_96dp.png"></div>
</div>
</div>
</div>
</body>
</html>
We can't see the images (links are broken) and so the problem. But if you are only trying to display images in a row and centered together, i suggest you to check [CSS Flexbox].(https://www.w3schools.com/css/css3_flexbox.asp)
I edited the settings in codepen to use bootstrap for css but it will not display page as it does locally.
Here is what the page looks like locally.
Here is the local code with the paragraph content shortened.
<html>
<head>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="font-awesome-4.6.1/fonts/fontawesome-webfont.svg">
<style>
body{
margin: 50px;
background-color: black;
}
.container{
border: 3px solid red;
width: 80%;
}
</style>
</head>
<body>
<div class="container panel panel-default">
<div class="row text-center">
<div class="col-xs-12">
<h2>William "Bill" Paxton</h2>
<p><em>May 17, 1955 – February 25, 2017</em></p>
</div>
</div>
<figure class="figure text-center">
<img src="images/download.jpeg" width="30%" alt="image of Bill Paxton">
<figcaption class="figure-caption">An image of Bill Paxton</figcaption>
</figure>
<div class="well">
<section>
<p>...</p>
<h3>Early Life</h3>
<p>...</p>
<h3>Career</h3>
<p>...</p>
<h3>Personal Life</h3>
<p>...</p>
</section>
</div>
<div class="well">
<section>
<h3>Click here check out is filmography on IMDB</h3>
</section>
</div>
</div>
</body>
</html>
Here is what it looks like on codepen.
http://codepen.io/centem/pen/PbNbvR
What am I missing? Thanks in advance.
The default cdn that codepen.io uses for Bootstrap is for the Bootstrap 4 alpha. I've had problems with things not displaying properly as well.
Use this cdn instead:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
This is the image that im trying to center, ive tryed different ways to do this but to no success i think its to do with bootstrap pre determining the position and if so i dont know how to disable it can anyone help me with this issue many thanks.
<div class="container">
<div class="row">
<div class="col-md-5">
<!-- <img src="../images/4uSupportLogo.png" class="" height="250px"/> -->
<br> </br>
<!-- <img src="../images/4uSupportLogo.png" alt="Logo" align="top" width="300" height="200" </br> -->
<!-- <img src="../images/4uSupportLogo.png" width="300" height="200" style="display:block; margin-left:auto;
margin-right: auto;" align="center" /> -->
<center> <img src="../images/4uSupportLogo.png" class="img-responsive" width="300" height="200"> </center>
<br> </br>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-md-12 well text-center">
<h4><i><strong>The Username or Password is incorrect please try again.</strong></i></h4>
<p>
If you have forgot your password and would like to reset it please contact Jack </p>
<input type="button"
value="Request New Password"
onclick="location='../forgot_password/forgot.php'" />
</div>
</div>
</div>
It looks like that the row is just positioning the image wrongly.. <center><img></center> should work fine.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<center><img src="https://media.giphy.com/media/l0HlSYVgZLQ1Y4GdO/giphy.gif" class="img-responsive" alt="Cinque Terre" width="304" height="236"></center><br><br>
<img src="https://media.giphy.com/media/l0HlSYVgZLQ1Y4GdO/giphy.gif" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
Source
The img-responsive isn't doing anything to fix it left. Content flows left to right normally, so it's positioned normally. You can center it by adding text-align: center; on its parent element or by adding some rules directly to the image. This is better done on a class, but here's an example:
img {
display: block;
margin: 0 auto;
}
http://codepen.io/paulcredmond/pen/RGOKwr
Now, this is a new project, so I need some help.
I have the following code. Please press full screen.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<head>
<title>Stack Overflow Question</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="style/home.css">
<!-- Reference to main CSS Style File-->
<style>
ul {
margin:0 auto;
border-top:2px solid #000;
border-bottom: 2px solid #000;
padding:10px;
text-align: center;
font-family:"montserratlight";
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="container">
<div id = "navigation">
<p>
<ul class="col-md-12">
<!-- MAIN NENU BAR -->
<li><b>Home</b></li>
<li>Why Does This</li>
<li>Not</li>
<li>Work</li>
</ul>
<!-- Unordered lists.-->
</p>
</div>
<div class = "row">
<!-- Declaration of First Row -->
<div class="imageHolder col-md-12 hvr-underline-from-center">
<!-- Image Container as DIV -->
<div class = "imageInside" >
<img id = "imageHomeJPG" src="http://s30.postimg.org/8wav359r5/NYC.jpg" style="width:100%" />
</div>
<!-- Image Link -->
</div>
</div>
<div class="row">
<div class="col-md-6">
<a href="about.html">
<img src = "http://s30.postimg.org/mehrfflwh/Place1.jpg" style="margin-bottom:10px; margin-top:10px; width:100%;"/>
</a>
</div>
<div class="col-md-6">
<a href="about.html">
<img src = "http://s30.postimg.org/iw5rj1l0h/Place2.jpg" style="margin-bottom:10px; margin-top:10px; width:100%;"/>
</a>
</div>
</div>
</body>
</html>
Now, when expanded, this is what the website shows.
However, there is a small gap between both column 6 photos.
<div class="row" style="padding-right:0">
<div class="col-md-6">
IMAGE TAG
</div>
<div class="col-md-6" style="padding-left:0">
IMAGE TAG
</div>
This produced the following -
You can see that the image on the left is bigger on the right and therefore it is not correct.
My question is, how can I make the gap between the two columns smaller (to around 10px) without needing to change the padding? I want to make the images bigger in order to decrease the size of the gap, but I can't seem to find a way!
Thanks.
Make a class :
no-space {
Width: 100% !important;
Margin: 0px !important;
}
Then put this class in next to where col-md-6 is seep rated by a space like this :
Class="col-md-6 no-space"
And there should be no spaces between the photos now.
To actually solve this question too, what I can also do is go to the Bootstrap CSS file and edit the padding-left and padding-right values to equal amounts. Originally, both values are set at
padding-left:15px;
padding-right:15px;
but looking at other examples such as airBnb, their padding is both set at 12.5 so this is also another solution.