I'm at my wits end. I'm trying to center two div boxes on this page. The general page idea is
-------------
A A
-------------
B B B B B
-------------
C | D
-------------
a: 500px wide div
b: 200px wide div
c: narrow height div with a small thumbnail
d: similar to c
(Psuedocode)
<div> <!-- center two divs, unless the page is two narrow, then arrange them single file-->
A A <!-- A is a 500px width box containing nested divs for an image, a title, and a summary text-->
</div>
<div> <!-- Dividing border -->
<div> <!-- center four or five divs, B is 200px wide -->
B B B B
</div>
I'm creating an online newsletter and I want to dynamically create each "tile". But the tiles either stay left aligned, or if I use an inner div, do not move when the window is sized smaller
<body>
<center>
<div style="padding: 20px; border: 1px black solid; align-content: center; text-align: center; display: flex; justify-content: center; width: 96%; flex-flow: column; height: 100%;">
<!-- <div style="border: 1px red solid; align-content: center; text-align: center; display: inline-block; padding: 0px;"> -->
<div class="ArticlePreviewBox">
<div class="ArticlePreviewImageBox"><img src="Example/Eye Of the Sunset.jpg" width="450" height="300" alt=""/></div>
<div class="ArticlePreviewTitleBox">Eye of the Sunset</div>
<div class="ArticlePreviewSummaryBox"> abcdef ldfskjafd dslkfj fkljaks salfjkw eqwpoir qodpw flkas;lk flskajf sldkf pwo jflkadjf cb,zxv klafskf lkfsjalskd lfjdakdfj slkfjla kflsajkf slfkjldak fkjalskd sjfklsdjfa sfkljskaf skfjlksad slfjlksfja asljflsdkjf slfjklskfj skjflksajf l sfljklsajk salfklsak alkfjsafk lsfkjslakjf lasjfl kdsas lsjkk sdl</div>
</div>
<div class="ArticlePreviewBox">
<div class="ArticlePreviewImageBox"><img src="Example/Eye Of the Sunset.jpg" width="450" height="300" alt=""/></div>
<div class="ArticlePreviewTitleBox">Eye of the Sunset</div>
<div class="ArticlePreviewSummaryBox"> abcdef ldfskjafd dslkfj fkljaks salfjkw eqwpoir qodpw flkas;lk flskajf sldkf pwo jflkadjf cb,zxv klafskf lkfsjalskd lfjdakdfj slkfjla kflsajkf slfkjldak fkjalskd sjfklsdjfa sfkljskaf skfjlksad slfjlksfja asljflsdkjf slfjklskfj skjflksajf l sfljklsajk salfklsak alkfjsafk lsfkjslakjf lasjfl kdsas lsjkk sdl</div>
</div>
<!-- </div> -->
</div>
</center>
</body>
Related
I have this issue: I have flexbox with 3 photos in the center of the screen.
under these photos, I have some text like mobile number etc.
When I add this text into this boxes, this text is defining the width of my box, and it's moving boxes and they are not in the center anymore.
Final result should be: The box width should be the same but text should break and be centered.
Here you can see size of one box
Here you can see size od the other box
Snippet:
.ikony {
padding-top: 60px;
display: inline-flex;
justify-content: center;
width: 100%;
font-weight: 600;
font-size: 16px;
color: #020E46;
text-align: center;
font-family: Open Sans,Arial,sans-serif;}
.column {
padding: 90px 70px 0px 70px;}
<div class="ikony">
<div class="column prvy">
<img src="img/mobil-icon.png" alt="iconka-mobil" width="100px" height="100px">
<div class="txtpod">
<p>+421 918 000 000</p>
</div>
</div>
<div class="column">
<img src="img/pin-icon.png" alt="ikona pinu" width="100px" height="100px">
<div class="txtpod">
<p>address 273/14, Svit</p>
</div>
</div>
<div class="column">
<img src="img/email.png" alt="ikona pinu" width="100px" height="100px">
<div class="txtpod">
<p>myemail#gmail.com</p>
</div>
</div>
</div>
Thanks for any advice
Add flex-grow: 0 and width: 33% to the flex items (.column) to prevent them to get wider.
However, if you have something like an email address in one of the containers that forces it to be wider than 33% because it contains no spaces and therefore can't break into several lines (like in your snippet example), you should use a small font that lets it fit into the 33% width.
I have a couple of images
mockleft.png - 1228x500px
mockright.png - 1825x335px
My code is as below..
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="home">
<div class="intro">
<div class="row">
<div class="col-xs-5" style="background-color:blue">
<img src="img/mockleft.png" alt="logo" style="width:100%;">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-6" style="background-color:red;">
<img src="img/mockright.png" alt="logo" style="width:100%;">
</div>
</div>
</div>
</body>
The output is as below..
I wish for two things..
a) The left div with blue background should be same height as right div with red background and vice versa.
b)Once the right div with red background becomes same size with the left one, I want the mockright.png image to be vertically aligned at bottom of the right div.
I tried the vertical-align css to both the div as well as image without success.
All help is sincerely appreciated
Thanks
You could do it with flexbox. If you use Bootstrap 4 as #Pete suggests in the comments, you could achieve the same, since it uses flexbox.
JSFiddle Demo
.row {
display: flex;
}
.col-xs-1 {
width: 10%;
}
.col-xs-5 {
display: flex;
flex-direction: column;
width: 40%;
background: blue;
justify-content: flex-end;
}
.col-xs-6 {
width: 50%;
background: red;
}
<div class="row">
<div class="col-xs-5">
<img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-6">
<img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
</div>
</div>
a) Assuming you need to use Bootstrap 3, what you can do is use one of the options provided to make the columns the same height:
How can I make Bootstrap columns all the same height?
b) For that part, use auto margin:
<img src="img/mockright.png" alt="logo" style="width:100%; margin-top: auto;">
Hope it helps :)
I am trying to for Flex Layout the image only needs to align center not the text.
Currently I have two flex box the first box both Text and the second one Text and image so when I align items both also aligning center I need only Image to align center not the Text.
flex-container {
border: 1px solid;
display: flex;
align-items: center;
}
.flex-item {
flex: 1 auto;
border: 1px solid green;
height: 100%;
display: flex;
justify-content: center;
}
.flex-center {
align-items: center;
}
<div class="flex-container">
<div class="flex-item">I'm top dog!
</div>
<div class="flex-item flex-center">
I want to be vertically centered! And I am!
</div>
</div>
<div class="flex-container">
<div class="flex-item">I'm top dog!Previous. Next. Image for Scented Lolly Dude Small Hardtop Pencil Case from Smiggle ... Tall Pencil Pack X24 any 2 for $20 Tall Pencil Pack X24 $12.95 AUD. Previous. Next. Image for Scented Lolly Dude Small Hardtop Pencil Case from Smiggle
... Tall Pencil Pack X24 any 2 for $20 Tall Pencil Pack X24 $12.95 AUD.
</div>
<div class="flex-item flex-center">
<img src="data:image/jpeg;base64,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"
/>
</div>
</div>
This is the Plunker any one have idea please
expected
Remove flex-center from this div
<div class="flex-item">
I want to be vertically centered! And I am!
</div>
Keep the class on the div containing the image
<div class="flex-item flex-center">
<img src="" />
</div>
Change .flex-center in CSS to
.flex-center {
align-self: center;
}
Updated plunkr
Fixed typo and removed redundant styles.
.flex-container {
border: 1px solid;
display: flex;
}
.flex-item {
border: 1px solid green;
height: 100%;
}
.flex-center {
align-self: center;
}
<div class="flex-container">
<div class="flex-item">I'm top dog!
</div>
<div class="flex-item flex-center">
I want to be vertically centered! And I am!
</div>
</div>
<div class="flex-container">
<div class="flex-item">I'm top dog!Previous. Next. Image for Scented Lolly Dude Small Hardtop Pencil Case from Smiggle ... Tall Pencil Pack X24 any 2 for $20 Tall Pencil Pack X24 $12.95 AUD. Previous. Next. Image for Scented Lolly Dude Small Hardtop Pencil Case from Smiggle
... Tall Pencil Pack X24 any 2 for $20 Tall Pencil Pack X24 $12.95 AUD.
</div>
<div class="flex-item flex-center">
<img src="data:image/jpeg;base64,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"
/>
</div>
</div>
I've spent more time than I care to admit trying to get a row of images to be clickable links in a row that aligns the images in the middle of the row that doesn't break Bootstrap responsiveness. The links work fine, but the alignment is off, due to variations in the sizes of the images (though they're all compact-height landscape). I can get the images to align vertically within div.row, but it breaks responsiveness and images don't resize properly.
Here's a JSFiddle of what I've tried
Here's what I'm trying to do:
row
--------------------------------------------------------
| |
image1 | image2 | image3
| |
--------------------------------------------------------
Here's the best I can come up with:
row
--------------------------------------------------------
image1 | image2 | image3
| image2 | image3
| image2 |
--------------------------------------------------------
This answer is exactly what I'm trying to achieve, however the images don't vertically center for me when I use the CSS classes from it.
I've got images that are all compact landscape images on a Bootstrap project. Trying to align the images vertically within the row
What I've tried:
Here's what I started with:
<div class="row vertical-align">
<div class="col-sm-4">
<img src="../img/my-image-1.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="../img/my-image-1.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="../img/my-image-1.png" class="img-responsive">
</div>
</div>
I can get everything to appear in a row as a clickable link, but due to slight variations in sizes of the images, the images do not align in the vertical center of row. I added this vertical-align on a normal screen, but it breaks Bootstrap's responsiveness when the window resizes.
.vertical-align {
display: flex;
align-items: center;
}
For my second attempt, I removed the vertical align class from the div.row and removed Bootstrap's img-responsive class from the img tag, as follows:
<div class="row">
<div class="col-sm-4">
<div><img src="../img/my-image-1.png"></div>
</div>
<div class="col-sm-4">
<div><img src="../img/my-image-2.png"></div>
</div>
<div class="col-sm-4">
<div><img src="../img/my-image-3.png"></div>
</div>
</div>
In my CSS file, I added these classes:
.jumbotron .row > a {
display: block;
}
.jumbotron > .row div a img {
max-height: 80px;
max-width: 100%;
vertical-align: middle;
}
The CSS classes above don't break Bootstrap, but they align the images along the tops of them, not in the vertical center of the div.row.
I've tried a bunch of other stuff, but I can't get it to work. This post looked filled with promise, but I couldn't get it to work:
How to vertically align an image inside div
I'd like to get this figured out with CSS and HTML, no jQuery. Any suggestions re: what I'm ****ing up would be greatly appreciated.
Bootstrap's columns are floating by default with css float property. With float we can't middle align columns. However with display: inline-block we can. All we need is to remove float from styles of columns and change them to inline-block with vertical-align: middle and you will get what you want. But don't forget to remove extra space that comes with inline-block.
Here is the trick.
.vertical-align {
letter-spacing: -4px;
font-size: 0;
}
.vertical-align .col-xs-4 {
vertical-align: middle;
display: inline-block;
letter-spacing: 0;
font-size: 14px;
float: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="jumbotron">
<div class="row vertical-align">
<div class="col-xs-4">
<img src="http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
Note: Setting font-size: 0; letter-spacing: -4px on parent and applying parent's font-size: 14px; letter-spacing: 0 back on child elements will remove white space that comes with inline-block.
please try this and lemme know if this is what you wanted
<style>
img {
height: auto;
width: 100%;
}
.vertical {
height: 100vh;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.abcd {
min-width: 5em;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="vertical">
<div class="abcd">
<img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c">
</div>
<div class="abcd">
<img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c">
</div>
<div class="abcd">
<img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c">
</div>
</div>
</div>
</body>
I have created a little workaround. The real problem is that the <a> element is not cooperating. The link element won't obtain the width/height of his child, that is why the solution provided does not work. A workaround to this is to use the background-image property. Giving a wrapper a solid height and width and apply the image as background using background-size: contain. See the fiddle provided below.
https://jsfiddle.net/f9ogw26n/21/
.wrapper {
height: 200px;
width: 100%;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<a href="#">
<div class="wrapper" style="background-image:url('http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png');">
</div>
</a>
</div>
<div class="col-xs-4">
<a href="#">
<div class="wrapper" style="background-image:url('http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg');">
</div>
</a>
</div>
<div class="col-xs-4">
<a href="#" title="">
<div class="wrapper" style="background-image:url('http:////cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png')">
</div>
</a>
</div>
</div>
</div>
I'm trying to create a 3-column layout entirely of DIVs but I have difficulty.
If I used tables the old HTML 4 way, I can do this:
<div style="width:100%">
<table width="50%" align="center">
<tr>
<td align="left">
<img src="whatever.jpg">
</td>
<td align="center">
1 2 3
</td>
<td align="right">
<img src="whateverright.jpg">
</td>
</tr>
</table>
</div>
And the nice thing is the table spans 50% and the table is centered. Here's what I tried in DIV:
<div style="width:100%;overflow:hidden;">
<div>
<div style="float:left;">
<img src="whatever.jpg">
</div>
<div>1 2 3</div>
<div style="float:right;">
<img src="whateverright.jpg">
</div>
</div>
</div>
The only way I could do it is if I know the total size in pixels or em's of all elements in the inner div, then I could set the width of it and center it, but here's the problem.
The images I use are from sprites and the sizes are expressed in pixels.
The middle text I use are numbers of large size.
The size of the text is adjusted based on user's screen resolution.
Specifying text size in pixels will cause people with the wrong size monitor to have a problem reading the numbers. I'm creating an advanced pagination system.
Is there a way I can center a div of 3-columns inside another div without requiring the sum of the inner div width?
I tried only adding margin:auto to the main div inside the outer div without success.
And remember,
The inner columns of the inside div do render correctly for me as I like it. It's just the matter of centering the whole thing nicely inside the larger div is an issue. And I'm looking for a solution that can work with IE7.
I think it will solve your problem
HTML
<div style="width:100%;overflow:hidden;">
<div>
<div class="div" style="">
<img src="whatever.jpg">
</div>
<div class="div2">1 2 3</div>
<div class="div3">
<img src="whateverright.jpg">
</div>
</div>
CSS
div .div,.div2,.div3{
width: calc(100% - 66.666666%);
/* Firefox */
width: -moz-calc(100% - 66.666666%);
/* WebKit */
width: -webkit-calc(100% - 66.666666%);
/* Opera */
width: -o-calc(100% - 66.666666%);
width: expression(100% - 66.666666%);
display: inline-block;
}
.div{
float:left;
background:purple;
}
.div2{
float:right;
background:red;
}
.div3{
background:blue;
}
Ok, you have to use display properties accordingly.
.table{
width: 500px;
}
.row{
width: inherit;
display: block;
}
.cell{
width: 33.3%;
height: 50px;
display: inline-block;
vertical-align: top;
text-align: center;
margin: 0px -2.5px;
border: 1px solid #C0C0C0;
}
<div class='table'>
<div class='row'>
<div class='cell'>
<img src="whatever.jpg">
</div>
<div class='cell'>1 2 3</div>
<div class='cell'>
<img src="whateverright.jpg">
</div>
</div>
<div class='row'>
<div class='cell'>
<img src="whatever.jpg">
</div>
<div class='cell'>1 2 3</div>
<div class='cell'>
<img src="whateverright.jpg">
</div>
</div>
</div>
Well it turned out that the real answer for me was to float each inner container and specify a percentage of width for each inner container and have the widths add up to be the width of the outer container and each inner container must have something. For example:
<div style="width:100%;overflow:hidden">
<div style="float:left;width:20%">
some text at left
</div>
<div style="float:left;width:60%">
some text in middle
</div>
<div style="float:left;width:20%">
some text at right
</div>
</div>