I am using carousel for image display but I would like to cater it for all types of image dimension a user upload. I resized all images before displaying it in a carousel but i cant seem to make in into center. I have tried margin:auto / text-align:center either in the li tag or img tag but it doesn't seem to work for me. Below are some samples of the carousel showing empty spaces and the image should be displayed in the center.
Image restrained by width
Image restrained by height
What i wanted to achieve here is to make the images to display in the center either it is restrained by width or height. This is how my images are rendered
<div class="fanpageCarousel" ng-controller="FanCarouselCtrl"
ng-init="getImage()">
<ul rn-carousel rn-carousel-indicator rn-carousel-auto-slide="3"
rn-carousel-pause-on-hover="true">
<li ng-repeat="image in slides"><img ng-src="{{image.src}}" /></li>
</ul>
And these are my CSS customization
.fanpageCarousel{
position: relative;
margin: auto;
padding: 15px;
background-color: #ffffff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
max-width: 800px;
max-height: 450px;
border-radius: 4px;
}
.fanpageCarousel img{
max-width: 100%;
max-height: 400px;
}
here is the JSFiddle link
Hope someone can give me some assistance.. Thank You
Make the following changes to CSS:
.fanpageCarousel img {
bottom: 0;
left: 0;
margin: auto;
max-height: 100%;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
}
.fanpageCarousel li {
height: 450px;
overflow: hidden;
position: relative;
text-align: center;
}
In short the container (li) around each img needs to be set to position: relative; to allow the img to be positioned relative to it. Height needs to be specifically set on the li for this to work. text-align: center; is a fallback for older browsers to at least center the img horizontally. Setting position: absolute;, margin: auto; and bottom, left, right and top to 0 is what makes the img center in the li.
JS Fiddle:
http://jsfiddle.net/h82ajq0c/
Related
I'm trying to give background color to the icon present in the right hand side of the page. But background color is applied only for the image as a block. But actually what I need is background should start from the right side of the page and should end at the left side of the page. So I set the min-inline-size as 100%. This resolved the background issue. Now the image is in the left hand side. But I'm not getting how to achieve this?
<img src="excelpng.jpg" style="height: 25px; overflow: hidden; background-color: darkred; display: inline-block; min-inline-size: 100%" alt="">
Apply width: 100%; text-align: right; to img
img {
position: fixed;
margin: 1px;
right: 0px;
display: inline-block;
min-inline-size: 100%;
height:25px;
overflow: hidden;
background-color: darkred;
width: 100%;
text-align: right;
}
<img src="excelpng.jpg">
Hope this helps:)
#searchInput {
width: 50%;
height: 40px;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
top: -12em !important;
left: 1em !important;
}
I can't get this div to stay centered in my mediawiki wiki. Is there a way to do this? The code above doesn't do anything. It just stays in place. I have applied what I know in previous post, and it still doesn't work for certain divs.
I'm trying to create a nav bar with four elements, two smaller buttons that will link to the homepage and a contact page, and then two larger buttons that will link to the two main sections of the site. I'm trying to position things in such a way that the two large buttons are centered, with the two smaller buttons to the left of them.
I can't "margin: 0 auto;" the two large buttons inside their own div as I would have to set it to "display: block;" which sets them on a different line than the smaller buttons, and absolutely positioning things messes up the layout as soon as the browser window changes.
I feel like I'm missing something simple here. Am I going at this from the wrong angle?
Here's a Dabblet of what I have at the moment... http://dabblet.com/gist/6287837
HTML
<div id="nav-container">
<div id="small-button-container">
<img src="http://placehold.it/47x22" class="small-button01" />
<img src="http://placehold.it/70x42" class="small-button02" />
</div>
<div id="big-button-container">
<img src="http://placehold.it/360x64" />
<img src="http://placehold.it/360x64" />
</div>
</div>
CSS
#nav-container{
outline: 1px red dashed;
width: 1000px;
display: block;
margin: 0 auto;}
#small-button-container{
display: inline-block;
width: 136px;
position: relative;
top: -22px;
left: 40px;}
#big-button-container{
display: inline-block;
width: 780px;
height: 64px;
margin-left: 70px;}
.small-button01{
display: inline;
position: relative;
left: 5px;}
.small-button02{
display: inline;
position: relative;
left: 15px;}
You can apply position: absolute; to your #small-button-container, so the the big buttons will centre.
Note we put position: relative; on the parent container so the #small-button-container will be positioned absolutely relative to it's parent.
CSS
#nav-container {
outline: 1px red dashed;
width: 1000px;
display: block;
margin: 0 auto;
text-align: center;
position: relative;
}
#small-button-container {
position: absolute;
top: 0;
left: 0;
}
Demo
In addition to position: absolute you can also try using a negative left margin on #nav-container if you know the computed width of #small-button-container. You can use text-align: center on #nav-container. Since it's a div you don't need to use display:block too. If you have additional padding on #small-button-container you'll need to take this into account.
#nav-container {
margin: 0px auto;
text-align: center;
margin-left: -136px;
}
This is a common question but slightly different from the solutions I found and I've been trying to solve it without success, so if someone could give me a help on this I would appreciate.
I have a #wrapper div that stretches to 100% width and height of browser. So far, so good... Now, inside the #wrapper I need a #content div that auto stretches with the parent div maintaining a 30px margin around it. I (almost) managed to do it but I can't make the #content div stretch in its height.
Here's an example of what I'm trying to do:
This is the CSS code I have:
* {
margin: 0;
padding: 0;
outline: 0;
}
html, body {
height: 100%;
width: 100%;
text-align: center;
cursor: default;
}
#wrapper {
width: 100%;
min-height: 100%;
height: auto !important;
position: absolute;
background: #333;
text-align: center;
}
#content {
/*width: 100%;*/
min-height: 100%;
height: auto !important;
margin: 30px;
overflow: hidden;
background: #ccc;
}
This is the HTML:
<body>
<div id="wrapper">
<div id="content">
This DIV should stretch to 100% height of its parent and body
minus the 30px margin around and resize as the window is resized.<br />
It's working in width but not in height!<br /><br />
Whatever goes in here (a child DIV) no matter its size should not be
visible beyond this DIV boundaries (as the Overflow is set to "hidden")!
</div>
</div>
</body>
And this is what I'm getting in both Chrome and IE:
Any help on this? Is it possible? Am I missing something stupid?
Thanks in advance,
LM
In your .css, replace #content with the following
#content {
overflow: hidden;
background: #ccc;
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
}
#content {
min-height:90%;
position:absolute;
margin: 5%;
overflow: hidden;
background: #ccc;
}
Given a div with known dimensions, say width: 300px; height: 200px, what is the easiest method to place it in the middle of the screen both vertically and horizontally ? Example here
I'm interested in latest Firefox (no need for IE hacks).
CSS only please, no Javascript.
Position it 50% from the window/parent container and use a negative margin size that's half of the elements width/height :)
position: absolute; // or fixed if you don't want it scrolling with the page.
width: 300px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
You might need to set height: 100%, on both the body and html
html, body {
height: 100%;
}
Edit: Here's a working example .
Without supporting IE, this is actually pretty easy to achieve using display: table and display: table-cell.
Here's an update to your HTML:
<div id='my_div'>
<div class="centered">this is vertically centered</div>
</div>
CSS:
body, html
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
border: 1px solid blue;
}
#my_div
{
width: 300px;
border: 1px solid red;
margin-left: auto;
margin-right: auto;
height: 100%;
display: table;
overflow: hidden;
}
.centered
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
And to preview: http://jsfiddle.net/we8BE/
I don't know if this is the simplest way, but it seems to work.
http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm
What methods are you open to using? For example CSS up to what level - 2 or 3? Javascript? jQuery? My first thought is that, since divs can be centred horizontally through margin-left: auto; and margin-right: auto;, maybe try margin: auto; for all 4 sides. Let me know if it works.
The easiest? One of the numerous jQuery center plugins available...