I'm using mvc5 with razor viewengine and bootstrap
I want became some images centered , when I use Boostrap.css center not working but when I delete bootstrap.css it works fine . I used bootsrtap text center class but it doesn't work too :/
http://jsfiddle.net/9h5rvgLc/
There is an another way to do that:
Include class="center-block" in the image as follows:
<img .. class="img-responsive center-block" src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" />
Check Fiddle:
https://jsfiddle.net/9h5rvgLc/5/
use .img-responsive{ margin:0px auto} may it works for you
Try adding display: block; margin: 10px auto to the style attribute. That will center the div the image. I have updated the jsfiddle for demo, link.
<div>
<div style="margin-top: 10px; padding-right: 0px; padding-left: 0px;" class="col-sm-12 col-md-6 col-lg-4">
<a href="#">
<img style="display: block; margin: 10px auto; width:450px ; height:390px;" class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" />
</a>
<h3 class="h">#item.GoodTitle</h3>
<h5 class="h">#item.GoodSubText</h5>
</div>
</div>
Ps. Would also change the height from height: 390px to height: auto to avoid the image stretching.
Change your image tag to this:
<img style="width:450px ; height:390px; display: inline" class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" />
Notice I added: display: inline
Related
Say I want my web page display things like this, but I want to use <figure> tag.
The problem is that simply attach the style on to the <figure> is not a perfect way.
For example, if add circular, then both of the <img> and <figcaption> will be "circulared".
<figure class="ui small right floated image circular">
<img src="/img/here.jpg">
<figcaption>Caption here...</figcaption>
</figure>
caption of the picture is "circulared" too
Can semantic-ui work like this:
<figure class="ui right floated">
<img class="image small circular">
<figcaption class="something else">
kind like inheritance?
I hope this will solve your problem with img tag and div let me know if any doubt check this code pen https://codepen.io/anon/pen/OdqKLy
html
<div class="card">
<div>
<img class="ui image circular" src="https://sample-videos.com/img/Sample-jpg-image-500kb.jpg">
</div>
<div>
Caption here...
</div>
</div>
CSS
.card {
width: 180px;
margin: 10px;
padding: 0px 10px;
text-align: center;
}
This answer is inspired by this answer.
CSS
<style>
[class*="left floated"] {
float: left;
margin-left: 0.25em;
}
[class*="right floated"] {
float: right;
margin-right: 0.25em;
}
figcaption[class*="centered"] {
margin-left: auto;
margin-right: auto;
text-align: center;
display: block;
}
</style>
Then, if you want to right float or left float the whole <figure>, just add it to the class, like below:
<figure class="right floated">
<img class="ui small bordered centered circular image" src="image.png">
<figcaption class="centered">
Caption here...
</figcaption>
</figure>
If you want the whole <figure> be centered, just leave the <figure> class blank, and the browser will render it to "center float" by default. But the centered in <img> is still necessary.
I'm using bootstrap 3 in the latest release - 3.3.4 - and unfortunately the .img-responsive class isn't working properly.
I tried everything, even .col-md-12 along with .img-responsive and nothing.
HTML:
<header class="container" id="container">
<div class="row">
<section class="col-md-3">
<a href="#">
<img class="img-responsive" src="http://placehold.it/350x150" alt="..." />
</a>
</section>
<section class="col-md-9">
<p>something else...</p>
</section>
</div>
</header>
CSS:
#container {
height: 60px;
background-color: red;
}
You can see the live preview here.
#edit
The image is over the container - the red part - that is the reason for the question, .img-responsive was supposed to resize the image to make it fit, but it doesn't.
Delete height: 60px;
You only need:
#container {
background-color: red;
}
Image has height 150px, but #container has 60px.
Your code is perfect. Here my pen http://www.bootply.com/Dka4RjELYK. Have you check your links and script references?
I am using Twitter Bootstrap and its grid layout and in one column I am trying to get an image pulled to the right and a text pulled to the right next to the image as well while they should both be vertically centered. With the image it's easy - I made the class img-responsive and added padding to that column and a pull-right to the image so it sits well, however the text doesn't seem to center whatever I try.
I tried applying this to the column:
.center{
display : table-cell;
vertical-align : middle;
float:none;
}
and it seemed to work when there's only text, however with the image included it won't.
Here is my code for the column:
<div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
<img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="">
<h4 class="pull-right" id="nametext">Welcome!</h4>
</div>
And CSS:
#namecolumn {
padding: 1vh;
}
.img-responsive {
height: 100%;
margin: 0 auto;
}
Thanks!
h4 is a block element, so set it as inline-block and give vertical-align:middle; to both img and h4 , so they center to each other on the baseline.
#myimage, #nametext {
display:inline-block;/* defaut display of img tag */
vertical-align:middle;
}
You will need to cretae 2 wrapper divs that have a value of display: table and display: table-cell. Then you can use vertical-align: middle.
DEMO http://jsfiddle.net/Fa8Xx/1750/
CSS
.wrapper {
height: 100%;
display: table;
}
.wrapper-inner {
height: 100%;
display: table-cell;
vertical-align: middle;
}
HTML
<div class="wrapper">
<div class="wrapper-inner">
<div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
<img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="" />
<h4 class="pull-right" id="nametext">Welcome!</h4>
</div>
</div>
If you want to vertically center float elements like col-md-3 and so on use this example http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
Ι want to have 5px space between the image and its description.
I tried margin-left or padding-left but it doesn't do what I want to achieve, it creates the space from the begging of the container. Any idea how I can do that?
#portofolio-element-image{
width: 128px;
height: 128px;
margin-bottom: 5px;
float:left;
}
#portofolio-element-description{
color: white;
text-align:justify;
margin-left: 5px;
}
Why not use:
#portofolio-element-image{
margin-right:5px;
}
Adding a margin to the text will have no effect on the distance between it and the floated image, because the image falls within the text element.
<div class="col-sm-6">
<div class="clearfix">
<img src="people_image/test.jpg" alt="" class="pull-left" height="150px" width="150px" hspace="20">
<div style="text-align:left;">
<p><strong>Name:</strong> TEST Name</p>
<p><strong>Role:</strong> Tester</p>
<p><strong>Program Name:</strong> PHP MYSQK </p>
<p><strong>Time:</strong> 5 to 6 </p>
</div>
</div>
</div>
Before using margin-left element, you should put your image and the text to a DIV element in html , the it work perfectly.
In this fiddle : http://jsfiddle.net/H4F8H/16/
I'm attempting to center two divs by wrapping an outer div and centering it :
<div style="margin-left:auto;margin-right:auto;">
But the divs are remaining left aligned. How can I center these divs on page ?
fiddle code :
HTML :
<div style="margin-left:auto;margin-right:auto;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
CSS :
*{
margin:0;
padding:0;
}
#block {
margin-right:100px;
border-width: 2px;
border-color: #4682B4;
background-color: WHITE;
width: 100px;
text-align: center;
line-height:30px;
padding:3px 0;
float:left;
}
img{
float:left;
}
#block:hover {
background-color: #C2DFFF ;
}
div is a block level element by default so it will take up 100% of horizontal space if you do not assign some width to it, so you need to assign some width to your container
<div style="margin-left:auto;margin-right:auto; width: 300px;">
Here, you can just set the width accordingly. Also avoid using inline CSS.
Your CSS is lil sloppy, for example margin-right:100px; is not required, also, you can use shorthand like
margin: 0 auto; = margin-left:auto; margin-right:auto;
Demo (Added a red border just to show the boundaries)
Note: You are floating your elements, so make sure you clear your floats either by using <div style="clear: both;"></div> which I've already done in the demo provided, else you can also use the snippet below to self clear the parent like
.clear:after {
display: table;
clear: both;
content: "";
}
A couple things I want to point out in this post:
You have set Id="block" in two different instances. Id's are meant to be unique. If you want a reusable identifier you should be using classes.
Inline styling should be avoided when possible. In this case there is no need to set inline styling on the parent div.
There is more then one way to center div's
I am going to leave this link here: http://thenewcode.com/723/Seven-Ways-of-Centering-With-CSS
This would be my solution:
html:
<div class="container">
<div class="block">
<span>Test</span>
</div>
<div class="block">
<span>Test 2</span>
</div>
</div>
css:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.block {
display: flex;
background: grey;
width: 30%;
height: 200px;
border: 1px solid #777;
margin: 5px;
}
Give a width to that container.
#outerdiv{
margin-left:auto;margin-right:auto;
width:500px;
}
<div align="center">
<!-- -staff ->
</div>
margin:auto; doesn't work unless the width is specified...
<div style="margin:auto;width:100px;">
your content here. [Replace the width with your choice]
</div>
Giving width and margin auto will centralise the content in specified width.
<div style="margin-left:auto;margin-right:auto;width:400px;">//give variable width here..Normally 1000 to 1018..
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
Like this
DEMO
CSS
.container{
width:960px;
margin:0 auto;
text-align:center;
border:1px solid red;
}