This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 2 years ago.
my problem is space between pictures
Hello everyone,
I am from Russia and my eng so bad, sorry for this.
I have a problem with margin that u can see on the attachment photo.
I already try justify-content and it didnt help to solve my problem.
i don't know from where this margin appeared.
Somebody please help me
thx
<style>
.services1 {
display: flex;
width: 80vw;
align-items: center;
margin-left: 10vw;
background-color: white;
text-align: center;
}
.photo {
width: 40vw;
}
.photo div {
margin: 0;
}
.services_text_photo1 {
width: 40vw;
color: black;
font-weight: 100;
font-size: 16px;
}
h5 {
font-size: 32px;
font-weight: 600;
margin: 0;
}
.services_text_width {
width: 35vw;
margin:0 2.5vw;
}
</style>
<div class="services1">
<div class="services_text_photo1 services_text_width">
<h5>text</h5>
<p>text</p>
</div>
<div class="photo">
<img src="img/photo.jpg" alt="" width="100%">
</div>
</div>
<div class="services1">
<div class="photo">
<img src="img/photo-3.jpg" alt="" width="100%">
</div>
<div class="services_text_photo1 services_text_width">
<h5>text</h5>
<p>text</p>
</div>
</div>
So this isn't a flexbox specific issue but rather an issue with how the browser renders images.
To fix it simply add
.photo img {
vertical-align: bottom;
}
```html
This post has some good info in explaining it I think
https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image/5804278
Related
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 2 years ago.
I have 4 divs that lay two in row and two columns. They are different height and I want it to be taken into consideration when displaying on page. I always want the lower divs to stick vertically to upper ones like in the left side.
Now the code.
app.component.html
<div id="wrapper">
<div id="content">
<div id="first-row">
<div class="col">
<br>
<a routerLink="/projects/endless-blow">Endelss Blow</a>
<br>
<a routerLink="/projects/endless-blow"><img src="assets/images/endlessblow_icon.png"></a>
<br><br>
<hr>
<br>
<div class="technology_images">
<img src="https://freeiconshop.com/wp-content/uploads/edd/android-flat.png" width="75px" height="75px">
<img src="https://cdn.iconscout.com/icon/free/png-256/java-23-225999.png">
<img src="https://inforce.rs/wp-content/uploads/2018/07/spring-boot-logo-e1530901263416.png" width="188px" height="75px">
<img src="assets/images/postgresql_icon.png" width="75px" height="75px">
</div>
</div>
<div class="col">
<br>
<a routerLink="/projects/book-library">Book Library API</a>
<br>
<a routerLink="/projects/book-library"><img src="assets/images/win_console_icon.png"></a>
<br><br>
<hr>
<br>
<div class="technology_images">
<img src="assets/images/java_icon.png">
<img src="assets/images/jetty_icon.png" width="265px" height="75px">
</div>
</div>
</div>
<div id="second-row">
<div class="col">
<br>
<a routerLink="/projects/endless-blow">Endelss Blow</a>
<br>
<a routerLink="/projects/endless-blow"><img src="assets/images/endlessblow_icon.png"></a>
<br><br>
<hr>
<br>
<div class="technology_images">
<img src="assets/images/android_icon.png" width="75px" height="75px">
<img src="assets/images/java_icon.png">
<img src="assets/images/spring_boot_icon.png" width="188px" height="75px">
<img src="assets/images/postgresql_icon.png" width="75px" height="75px">
</div>
</div>
<div class="col">
<br>
<a routerLink="/projects/book-library">Book Library API</a>
<br>
<a routerLink="/projects/book-library"><img src="assets/images/win_console_icon.png"></a>
<br><br>
<hr>
<br>
<div class="technology_images">
<img src="assets/images/java_icon.png">
<img src="assets/images/jetty_icon.png" width="265px" height="75px">
</div>
</div>
</div>
</div>
</div>
app.component.css
html, body {
margin: 0;
padding: 0;
align-items: center;
text-align: center;
}
body {
border: 3px solid green;
max-width: 600px;
margin: 0 auto;
color: #fff;
}
#wrapper {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: darkcyan;
}
#content {
border: 3px solid red;
box-sizing: border-box;
position: absolute;
padding: 0;
margin-left: 0;
margin-right: 0;
text-align: center;
overflow: auto;
left: 0;
right: 0;
top: 70px;
width: 100%;
}
#content a {
font-size: 25px;
}
#first-row {
margin-top: 20px;
}
.col {
border-radius: 15px;
-moz-border-radius: 15px;
display: inline-block;
width: 350px;
min-height: 350px;
border: 3px solid green;
background: rgba(150, 150, 50, 0.8);
vertical-align: top;
text-align:center;
margin: 0 40px;
/* margin-right: 100px; */
}
.col a img {
padding:0;
left:0;
right:0;
margin: 0 auto;
}
.technology_images {
text-align: left;
}
div:not(.technology_images, .col) {
min-height: 400px;
box-sizing: border-box;
width: 100%;
}
If you need code uploaded with result just take a look here
I did not see any topic that corresponds to my problem so please do not close this topic.
Thank you! :)
This is really hard to achieve with HTML/CSS, and be flexible at the same time, nearly to impossible I would say, because in the real world, you might not know what height and width your elements really are and how many there are on each column.
The only HTML/CSS solution (if this fits your case) would be to create a single row, with multiple columns in it and display all the items by column. For this one, you really need to know beforehand exactly how many elements you would have on each column.
For a flexible solutions, I would really recommend using Masonry. This library would help you achieve the result you need really fast without having to do a complicated layout, which will also be complicated to maintain in the long run when multiple items might get added.
This question already has answers here:
CSS - center two images in css side by side
(5 answers)
How to place two divs next to each other? [duplicate]
(13 answers)
Closed 4 years ago.
I am fairly new to html and css, and I was trying to make two images go side by side in the center of the screen (automatically adjusting themselves when the screen is scaled).
I have only been able to get the two images to go next to each other and not been able to center them or make them automatically scale.
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
The two images should go next to each other in the centre of the screen, scaling themselves on different sized browser windows and when browser is zoomed in or out. I should be able to change the size of the images to what I need.
Here is a way to do it with flexbox
JSFiddle demo here
* {
height: 100%;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.images {
display: flex;
justify-content: center;
align-items: center;
margin: auto 0;
padding: 0 200px;
}
#media screen and (max-width: 768px) {
.images {
flex-direction: column;
padding: 0;
}
}
<div class="images">
<img src="https://placekitten.com/600/400">
<img src="https://placekitten.com/600/400">
</div>
Add the following css-
body
{
text-align:center;
}
.row
{
display:inline-block;
}
I hope this will help you.
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.ul_class {
width: 100%;
display:block;
text-align: center;
}
.li_class {
width: 33.33%;
display:inline-block;
margin-right: -4px;
}
</style>
</head>
<body>
<ul class="ul_class">
<li class="li_class"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpVNXBVaIl8ne-AYJfYxls2Js2dcYJohl5e-d3ompbZxrjtzlk" alt="Snow" style="width:100%"></li>
<li class="li_class"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpVNXBVaIl8ne-AYJfYxls2Js2dcYJohl5e-d3ompbZxrjtzlk" alt="Snow" style="width:100%"></li>
</ul>
</body>
</html>
Use below code in your css.
OR
You can use flex. check below link.
https://www.w3schools.com/cssref/css3_pr_justify-content.asp
.row{ width:80%; margin:0 auto; }
try using flex on the row element
.row {
display: flex;
justify-content: center;
align-items: center;
}
I start to learn HTML and on my website in the middle of the top there should be a heading in the center. In the left top corner, there is a picture.
If I want to set the heading with align="center"; into the middle I can only set it into the middle between the right end of the picture and the right end of the Display...
I hope it's understandable and someone can help me!
The code is:
<div style="float:left; width=600px; height=152px;">
<img src="bilder/logo.jpg" height="54px" width="214px" hspace="0" vspace="0"/>
</div>
<p>
<h1 align="center" style="margin-top:15px; margin-bottom:20px;"><u>Peter Möhle</u></h1>
</p>
enter image description here
It should look like the Picture at the Bottom but this was made mith margin-left and isnt a fixed Position if i use another browser or display
I've updated your snippet as you are using deprecated tags. Happy to hear and clear your doubts, if you have any.
Ref: W3 CSS, W3 HTML
.nav {
width: 100%;
}
.logo-holder {
float: left;
height: 50px;
width: 100px;
}
.logo {
height: 100%;
width: 100%;
}
.nav-text {
text-align: center;
text-decoration: underline;
}
<div class="nav">
<div class="logo-holder">
<img class="logo" src="bilder/logo.jpg" />
</div>
<div class="nav-text">
<h1>Peter Möhle</h1>
</div>
</div>
You can use text-align: center; to centre text, but as mentioned in the comments you are using some deprecated tags.
<h1 style="margin-top: 15px; margin-bottom: 20px; text-align: center; text-decoration: underline;">Peter Möhle</h1>
It's even better to remove the style attribute and create a css file to put the styles in.
CSS
h1 {
margin-top: 15px;
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
}
I'd also change the div markup to
<div style="float: left; width: 600px; height: 152px;">
<img src="bilder/logo.jpg" style="height: 54px; width: 214px;">
</div>
I've used padding to the left now using relative value
<div style="float:left; width=600px; height=152px;">
<img src="bilder/logo.jpg" height="54px" width="214px" hspace="0" vspace="0"/>
</div>
<p>
<h1 style="margin-top:15px; margin-bottom:20px; padding-left: 50% "><u>Peter Möhle</u></h1>
</p>
I'm trying to align three background images side by side, ideally with fluidity so that they re-position when my browser window resizes.
I've tried searching for an answer to this problem and thought using CSS properties suited to aligning regular 'img src' elements would work, however they haven't.
Essentially, I have a page with a gallery. Each image has a city name in it's center. Through research, I've decided to assign a background-image property to three separate divs and used the line-height property matching the height of each image so that the city name aligns itself in the center. The background-image technique assists in the alignment of the city name.
Where am I going wrong?
#jumbotron2 {
height: 500px;
width: 100%;
}
#city-container {
width: 100%;
height: 100%;
}
.london-square {
height: 400px;
width: 400px;
background-image: url("tombnb-images/london-400px.jpg")
}
.newyork-square {
height: 400px;
width: 400px;
background-image: url("tombnb-images/newyork-400px.jpg")
}
.sydney-square {
height: 400px;
width: 400px;
background-image: url("tombnb-images/sydney-400px.jpg")
}
.square p {
font-family: 'Slabo 27px', serif;
font-size: 32px;
color: #FFFFFF;
line-height: 400px;
text-align: center;
text-shadow: 0px 0px 10px black;
}
<div id="jumbotron2">
<div id="city-container">
<div class="london-square square">
<p id="text">London</p>
</div>
<div class="newyork-square square">
<p id="text">New York</p>
</div>
<div class="sydney-square square">
<p id="text">Sydney</p>
</div>
</div>
</div>
if you use a percentage width of your divs you have to float them too.
I recommand using this:
#city-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-warp: wrap;
}
You can use bootstrap. you put your images inside divs.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-4">
<img class="img-thumbnail" src="http://www.nature.org/cs/groups/webcontent/#web/#giftplanning/documents/media/sample-cga-rates-splash-1.jpg">
</div>
<div class="col-sm-4">
<img class="img-thumbnail" src="http://sharedforfree.com/wp-content/uploads/2013/07/cropped-harrimanToday.jpg">
</div>
<div class="col-sm-4">
<img class="img-thumbnail" src="http://pre02.deviantart.net/f34e/th/pre/f/2015/182/4/f/croatia_nature_pack___sample__2___proref_org_by_proref-d8zgrc2.jpg">
</div>
</div>
Check out this fiddle:
jsfiddle example
I've been having an enormous amount of trouble for what I thought would be easy, but it's turning out to be much more difficult than I had anticipated.
I have an image alt="home" that I want to center in my footer, with text underneath it, but margin-left and margin-right: auto don't work, margin: 0 auto doesn't work either. Are there other options to center something?
And for the address, it's being pushed down because the width of the copyright and "home" img have a width the size of the footer. When I try to apply a width percentage to the div containing the home img and the copyright text, it disappears for some reason?
This is the result I want to achieve: http://i.imgur.com/khjrZow.jpg
jsfiddle (with complete html and css): http://jsfiddle.net/A2H3n/
If anyone knows what's going on, and can let me know, that would make me so happy... but really, I've spent 4 hours trying to fix this(I've just started learning CSS). Any help would be appreciated!
Relevant HTML:
<footer>
<div id="sociallinks">
<img class="sociallogo" src="images/facebooklogo.jpg" alt="Facebook">
<img class="sociallogo" src="images/Twitterlogo.jpg" alt="Twitter">
</div>
<div id="logoandtext">
<img id="footerlogo" src="images/blackbeltinverse.png" alt="home">
<p>© Hsien-Jin Martial Arts Studio<p>
</div>
<div id="contactinfo">
<p>7548 Mahogany Rd</p>
<p>Los Angeles, CA 97789</p>
<p>(444) 123-4567 </p>
</div>
</footer>
Relevant CSS:
footer{
overflow: hidden;
display: block;
margin: 0 auto;
color: #FFFFFF;
}
#sociallinks{
float: left;
margin: 0;
display: block;
width: 20%;
height: 100%;
}
.sociallogo{
width: 3em;
height: 3em;
}
#footerlogo {
width: 4em;
height: 4em;
margin: 0 auto;
}
#contactinfo {
line-height: 1.25em;
text-align: right;
}
display:inline-block; may be the answer:
footer{
text-align:center;
}
#sociallinks, #logoandtext, #contactinfo{
display:inline-block;
}
#contactinfo{
float:right;
}
Fiddle : http://jsfiddle.net/bonatoc/PLbae/1/
CSS overwrites are at the very bottom.
You can do it like this
Move the #contactinfo div above the #logoandtext
HTML
<div id="sociallinks">/*Some thing here*/</div>
<div id="contactinfo">/*Some thing here*/</div>
<div id="logoandtext">/*Some thing here*/</div>
CSS
#logoandtext {
margin: 0 140px;
text-align: center;
}
#contactinfo {
float: right
}