I have a DIV named mediashelter and there are four small photos inside the DIV
#mediashelter
{
width:200px;
height:300px;
background-color:black;
}
and inside the div are four small pictures placed vertically using
<div id="mediashelter" >
<img src="./images/fubu.jpg"><br>
<img src="./images/li.jpg"><br>
<img src="./images/t.jpg"><br>
<img src="./images/g.jpg">
</div>
how do I center the four small pictures inside the black rectangle named mediashelter? Thanks a lot once again
If you add text-align: center to #mediashelter, it works perfectly.
Fiddle:
http://jsfiddle.net/3Ff63/
Try this:
<div id="mediashelter" align="center">
Related
I've been trying to get the images to center on the page. I tried justifying the content in the center and also aligning items in the center but neither works. Neither does margin auto (which usually does work). I tried setting similar stylings for the div containing the image but still no change. I know I can add margins but causes and issue when I set the background color of the page so I'd like a different solution. Let me know if you have any ideas, thanks!
<ngb-carousel *ngIf="images" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide *ngFor="let image of images">
<div class="picsum-img-wrapper">
<img [src]="image" alt="Random slide">
</div>
</ng-template>
</ngb-carousel>
img {
width: 50vw;
height: 80vh;
margin-left: auto;
margin-right: auto;
}
Wrap your carousel inside a div with display flex. Something like this.
<div class="carouselCont">
<ngb-carousel *ngIf="images" [showNavigationArrows]="true" [showNavigationIndicators]="true">
<ng-template class="imageSlider" ngbSlide *ngFor="let image of images">
<div class="picsum-img-wrapper">
<img [src]="getImageLink(image)" alt="Random slide">
</div>
</ng-template>
</ngb-carousel>
</div>
The css style of carouselCont class applied shall be
.carouselCont{
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
height:100vh;
}
This way your carousel shall be aligned to center of the screen horizontally and vertically. No need to give vh/vw or margins to image itself for the sole purpose of aligning carousel in center (this way your images shall get stretched /shrinked in different screen resolutions)
Thanks.
I have rows of product thumbnails with the product text below. See here
Since the images have different heights the text is not always vertically aligned in the right place. I just changed the layout from tables to divs because it's easier and more modern.
I've worked through several examples, websites, and this site but still haven't found a way to align this correctly. I'd like the image aligned in the middle of the div and the text at the very bottom.
Here's the DIV code (very simple):
<div style="float:left; width:210px; height:200px; text-align:center;" >
<a title="Alton Banquette" href="http://test.pillarsoflifebook.com/banquettes/designer-banquettes/alton-banquette/"><img alt="" src="/wp-content/uploads/2013/10/ALTON-SETTEE_THUMB.gif" width="150" height="150" border="0" /></a>
Alton Banquette
</div>
It works fine on this page since the images are all the same height
Is there a simple solution to this? I like DIVS better but this wasn't a problem when everything was table cells since I could use valign=center, etc.
Thank you!
Always assign a class and organize your code , always wrap your text to avoid glitches:
<div class="wrap" >
<a title="Alton Banquette" href="http://test.pillarsoflifebook.com/banquettes/designer-banquettes/alton-banquette/">
<img alt="" src="/wp-content/uploads/2013/10/ALTON-SETTEE_THUMB.gif" width="150" height="150" border="0" />
</a>
<p>Alton Banquette</p>
</div>
.wrap
{
float:left; width:210px; height:200px; text-align:center;
}
}
.wrap p
{
display:block;
}
img
{
height:100% !important;
width:auto;
}
Fiddle Demo
so whenever you change the image height , text will always remain at bottom.
I'm new to designing web pages. I need to create a page that will have 2 sections.
The first section will have a logo on the top left corner. The second section will be in the middle of the page with some content generated by iframes.
I have put 2 div tags on the page: one for the image and another for content like this:
<div class="logo">
<a href="http://somelink.com/">
<img src=someimage.png'/></a>
</div>
<div class="content">
<iframe src="somepage.php></iframe>
</div>
How can I do it?
Than you
Try something like this:
Fiddle: http://jsfiddle.net/bjfxq/
Use CSS to position your elements. To learn more about styling, try this interactive tutorial:
http://www.codecademy.com/courses/css-coding-with-style/0/1
HTML
<div class="logo"><img src='http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png'/></div>
<div id="content"><iframe src="http://www.stackoverflow.com"></iframe></div>
CSS
#content {
text-align:center;
}
There are a million other ways to do this, but your question was basic, so my answer was basic.
CSS
.logo
{
float: left;
}
.content
{
text-align: center;
}
I have 4 images in a row. I want the third image to be overlayed on top of the second image but have not been able to successfully get it to work. Here is my fiddle:
http://jsfiddle.net/AndroidDev/Asu7V/4/
<div style="width:1000px">
<div class="x">
<img src="http://25.media.tumblr.com/avatar_dae559818d30_128.png" />
</div>
<div class="x">
<img src="http://scottsdalepethotel.com/wp-content/uploads/et_temp/cat-648150_128x128.jpg" />
</div>
<div class="x">
<img src="http://playgo.ro/wp-content/themes/play3.0/play.png" />
</div>
<div class="x">
<img src="http://blog.sureflap.com/wp-content/uploads/2011/11/Maru.jpg" />
</div>
</div>
Add the play image in second div and use position absolute and relative to make it one above the another.
.x{
border:1px solid #000000;
display:inline-block;
height:128px;
position:relative
}
.overlay_img{
position:absolute;
top:0;
left:0
}
DEMO
If you just want it to be over 2nd image then wrap those 2 images in 1 div and give it position:relative then give your Image2 and image 3 position:absolute and z-index:0 & z-index:1 respectively. And position them to top:0; & left:0; that should do it :)
If you can use modern CSS and only need the third image to overlay the second (as in, you don't need to repeat this pattern in a lot of places), you can use the nth-child selector:
.x:nth-child(3) {
margin-left: -136px;
}
This will select the third item with the x class and move it to the left.
if you use margin or position property,you can achieve the overlayed view,
Take a look at http://jsfiddle.net/manojmcet/Z7Y88/
I've read a bunch of SO questions/answers on side-by-side (row) divs, but I don't think I'm grasping it as I can't find a solution for my specific setup:
http://www.trforums.com/h18-iwaku
Basically, I want the div on the very bottom to be to the right to the "Hey, What's up", "Navigation," and "Connect" boxes, instead of just under them. Is this possible to do?
The divs themselves are just classes with their corresponding html content. It's very basic but here's my code:
http://pastebin.com/AQrqqewA
My html is very rusty so other suggestions are more than welcome. Thanks for any help.
Try surrounding each column in a DIV:
<!-- Left column -->
<div id="leftColumn">
<div class="ex">
<center><img style="display: inline;" src="http://i.imgur.com/wCP3WP3" alt="" /></center>
<h1>Hey, what's up?</h1>
</div>
<div class="navbar">
<b>NAVIGATION:</b> Zukan | Movies | Retsuden | Photography |
</div>
<div class="connect">
<b>CONNECT:</b> Livejournal
</div>
</div>
<!-- Right column -->
<div id="rightColumn">
<div class="slideshow">
Bottom div that I want in a row with the top one...
</div>
</div>
CSS:
#leftColumn {
float: left;
width: 410px; // Width of this column
}
#rightColumn {
float: left;
width: 500px; // Width od this column
}
Move the div with a class slideshow next to the div with a class ex and apply floats, as you can see in JS Bin
The final result can be seen here
Use float:left or display:inline on the divs that you want next to each other.