Centering image (logo) - html
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
Related
How do i set two pictures on the same line using html and css?
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>
Centering images with URL
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.
Table or CSS for Aligning Images in Signature
Can anyone advise and perhaps sample code to arrange the images below please ? It's for a html signature with linked images but i'm unsure whether tables or CSS would be best. Image Far Left should align with the other 4 horizontally and the two top images need to be centered above the larger images below. Any help appreciated. enter image description here
using css is better than table.I think you want something like this. but you should scale your images by width and height properties:
<!DOCTYPE html>
<head>
<title>goodarzi</title>
</head>
<style>
.first{
float:left;
width:30%;
text-align:center;
}
</style>
<body>
<div class="wrapper">
<div class="first">
<a href="" ><img src="" title="" /></a>
</div>
<div class="first">
<div>
<img src="" title="" />
</div>
<div><img src="" title="" />
</div>
</div>
<div class="first">
<div>
<img src="" title="" />
</div>
<div><img src="" title="" />
</div>
</div>
</div>
</body>
</html>
How to center hgroup in css
How to center hgroup, I want "welcome to sweet spirals" and "happiness in every bite" centered. The problem occurs when you open the page to full size, it doesnt center please help. heres the http://jsfiddle.net/yotzincastrejon/huco2sek/ <!DOCTYPE html> <html lang="en"> <head> <meta chartset="utf-8"> <title>Sweet Spirals</title> <link href="sweetstyle.css" rel="stylesheet"> </head> <body> <header class="header"> <div class="row"> Sweet Spirals <div class="header-right"> <nav class="header-nav"> Home Shop About Us FAQ Search </nav> <form method="get" accept-charset="UTF-8" action="/search" id="search" class="header-search"> <input type="search" name="q" placeholder="Search terms…"> </form> </div> </div> </header> <div class="content"> <div class="row"> <section class="main"> <hgroup class="heading home-heading" id="heading"> <h1 class="major" id="major">Welcome to Sweet Spirals</h1> <h2 class="minor" id="minor">Happiness In Every Bite</h2> </hgroup> <aside class="aside"> <div class="subscribe"> Like </div> <figure class="crackers2"> <img src="https://farm6.staticflickr.com/5655/22900680453_242b39b6d6_k.jpg" alt="missing" height="100%" width="100%" /> <figcaption>Peppermint Thins</figcaption> </figure> <div id="pepthinsbutton"> <script src="https://gumroad.com/js/gumroad.js"></script> <a class="gumroad-button" href="https://gum.co/Peppermintthins" target="_blank">Buy my product</a> </div> <figure class="crackers1"> <img src="https://farm1.staticflickr.com/773/22899649574_e49e0b6316_k.jpg" alt="missing" height="100%" width="100%" /> <figcaption>Chocolate Licorice</figcaption> </figure> <div id="licoricebutton"> <script src="https://gumroad.com/js/gumroad.js"></script> <a class="gumroad-button" href="https://gum.co/Tlut" target="_blank">Buy my product</a> </div> </body> </html> look at the fiddle for the css
its centered in the demo i forked from you and linked below; a few things:
a) hgroup is deprecated, you shouldn't be using it because it'll surely screw up the document outline that a user requires for their at software to run correctly.
b) section.row was set to a wonky width, around 500px...so i changed that to 100% with an important to override whatever was conflicting with it:
.main{width:100% !important}
http://jsfiddle.net/jalbertbowdenii/bz82g8fe/7/
Look for this part in your css:
.main {
float: left; /* Remove this line */
width: 36.25em; /* Remove this line */
margin: 2em 0 2.5em
}
cannot make my data in small centerd gray boxes
This is the beginning of my html: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"></link> <script type="script" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <h1>Delta Fresh Samples:</h1> <p>save date: 08:23:11 31-May-02015</p> <div class="jumbotron" id="distance_small"> <h3>distance small</h3>0_1 <br> <a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"> <img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)" height="100" width="200"> </a> <br><span> </span>editor:<span><a title="0_0" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969444,22950508,22946295,63734947,63734946,22945044,76103782,61849159,22943314,22945842,22949040,76952893,22958740,22955108,22963930,22963937,61487751,78453835,78453836,78190323,78190322,22966401,22963938,22955881,22952772,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704023,22959771,78100291,78100305,78100306,75676668,22959690,22947454,22940596,22961456,22958490,22948978,22961457,22963582,65496487,22946251,22964699,74195770,75079286,22964701,22965880,62248964,78100492,78100491,22962630,22951570,22948096,22954294,66161229,66147839,22960015,22949762,22945545,22946824,22951606,22951605,22948122,22946840,22960419,22965961,22960420,22962680,22962685,22962684,22962683,22947641,22961812,22964726,22965877,22965967,22965964,22951601,22946847,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 0</a></span><span><a title="0_1" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969776,83970667,83970668,83970679,83970678,83969787,83969884,83969791,83969889,83969965,62003149,22966553,22966554,22946589,22954701,22948771,22960706,22952457,22952456,69823920,67646833,22956976,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704067,61704043,22957408,61704040,72391451,72391452,61724192,61975137,61975144,57602828,61541078,22965716,22949679,22964912,22943804,22965887,22943805,81603700,81603658,22960396,22960397,22965904,22959154,22965764,22964822,22946555,22954865,22962698,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 1</a></span><span><a title="0_2" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,22551059,22540619,22540617,22521289,22531355,22531357,22523497,77460394,77460392,61690687,67007203,67007202,22959509,22952362,22947304,22946552,73617242,77749675,73617397,22961888,22941066,62110860,83482398,83482876,83482875,22946605,74542235,83482565,83482564,61713972,74882174,74882173,69051742,61975892,65179805,65179806,61713939,77541139,77541140,61975883,22952799,61539504,57601394,22959961,22947692,22959735,22958946,22958947,22958607,22951490,22961077,22964301,22954627,22946241,22963491,76369581,22950499,22966864,22965699,22949657,22962492,22962497,22962496,22946416,22948460,22951483,22948007,22946064,22951140,61459698,22957970,22965738,22954249,22954934,22960321,78858435,22958543,69824727,69824726,22945987,22945859,67102730,77869444,77869443,22966245">alt 2</a></span> <br> </div> <div class="jumbotron" id="distance_large"> <h3>distance large</h3>0_0 <br> <a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"> <img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)" height="100" width="200"> </a> <br><span> </span>editor:<span><a title="0_0" href="https:/www.waze.com/editor/? and this is the result: I wanted to created boxes in the center of the page. I saw twitter bootstrap example (this example) but I cannot make class "jumbotron" center my data in medium size gray boxes. what am i missing? In Addition, if i would want to style this without twitter bootstrap how would you advise me to do this?
you can achieve that with some styling
like this:
html
<h1>Delta Fresh Samples:</h1>
<p>save date: 08:23:11 31-May-02015</p>
<div class="jumbotron" id="distance_small">
<h3>distance small</h3>0_1
<br>
<a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)">
<img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"
height="100" width="200">
</a>
<br><span>editor:</span><span><a title="0_0" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969444,22950508,22946295,63734947,63734946,22945044,76103782,61849159,22943314,22945842,22949040,76952893,22958740,22955108,22963930,22963937,61487751,78453835,78453836,78190323,78190322,22966401,22963938,22955881,22952772,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704023,22959771,78100291,78100305,78100306,75676668,22959690,22947454,22940596,22961456,22958490,22948978,22961457,22963582,65496487,22946251,22964699,74195770,75079286,22964701,22965880,62248964,78100492,78100491,22962630,22951570,22948096,22954294,66161229,66147839,22960015,22949762,22945545,22946824,22951606,22951605,22948122,22946840,22960419,22965961,22960420,22962680,22962685,22962684,22962683,22947641,22961812,22964726,22965877,22965967,22965964,22951601,22946847,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 0</a></span><span><a title="0_1" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969776,83970667,83970668,83970679,83970678,83969787,83969884,83969791,83969889,83969965,62003149,22966553,22966554,22946589,22954701,22948771,22960706,22952457,22952456,69823920,67646833,22956976,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704067,61704043,22957408,61704040,72391451,72391452,61724192,61975137,61975144,57602828,61541078,22965716,22949679,22964912,22943804,22965887,22943805,81603700,81603658,22960396,22960397,22965904,22959154,22965764,22964822,22946555,22954865,22962698,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 1</a></span><span><a title="0_2" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,22551059,22540619,22540617,22521289,22531355,22531357,22523497,77460394,77460392,61690687,67007203,67007202,22959509,22952362,22947304,22946552,73617242,77749675,73617397,22961888,22941066,62110860,83482398,83482876,83482875,22946605,74542235,83482565,83482564,61713972,74882174,74882173,69051742,61975892,65179805,65179806,61713939,77541139,77541140,61975883,22952799,61539504,57601394,22959961,22947692,22959735,22958946,22958947,22958607,22951490,22961077,22964301,22954627,22946241,22963491,76369581,22950499,22966864,22965699,22949657,22962492,22962497,22962496,22946416,22948460,22951483,22948007,22946064,22951140,61459698,22957970,22965738,22954249,22954934,22960321,78858435,22958543,69824727,69824726,22945987,22945859,67102730,77869444,77869443,22966245">alt 2</a></span>
<br>
</div>
<div class="jumbotron" id="distance_large">
<h3>distance large</h3>0_0
<br>
<a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)">
<img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"
height="100" width="200">
</a>
<br><span>editor:</span><span><a title="0_0" href="https:/www.waze.com/editor/?"></a>
</div>
css:
.jumbotron{
background:#ddd;
width:220px;
margin:0 auto;
}
.jumbotron img{
display:block;
margin:0 auto;
}
.jumbotron a,.jumbotron span{
display:inline-block;
margin-left:10px;
}
see this fiddle
.jumbotron{
position : relative;
margin: 0 auto;
}
and for being in one line use display: inline-block