I have a div with a fixed height, and inside it there is an image. This image is larger than the width and height of the containing div. I want to make the width of the image to match the width of the div, and then make the height of the image automatically generated.
HTML:
<template>
<div class="portfolio">
<div class="header">
Portfolio
</div>
<div class="projects">
<div class="project">
<img src="../assets/projects/charlotte_folke.jpg" />
</div>
</div>
<div class="overview">
</div>
</div>
</template>
SCSS:
.portfolio {
width: 100%;
height: 100%;
}
.header {
height: 10%;
display: flex;
font-size: 24px;
color: #B59762;
align-items: center;
justify-content: center;
}
.projects {
height: 80%;
display: flex;
overflow: auto;
flex-direction: column;
}
.project {
width: 100%;
height: 35%;
overflow: hidden;
img {
width: 100%;
height: auto;
}
}
The problem with this solution, is that the image element still takes up space below the containing div. I want to cut off the image completely, so it only takes up the available space specified by the containing div.
How can i achieve this?
I'm constructing a simple layout with a title and sub-title. When the two can be displayed on one line without the text wrapping, they should do so with a small amount of spacing between them. In all other cases, the title and sub-title should occupy 100% width. There should be no margin-left on the sub title.
I have created this using Flexbox and the gap property. It renders properly in Firefox:
Here's the code:
header {
font-family: sans-serif;
background-color: rebeccapurple;
color: #fff;
padding: 0 5px;
}
.container {
max-width: 800px;
width: 100%;
flex-grow: 1;
margin-left: auto;
margin-right: auto;
}
header .container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 0.5rem;
align-items: baseline;
}
<header>
<div class="container">
<h1>Long title for the page itself</h1>
<h2>Subtitle</h2>
</div>
</header>
<br />
<header>
<div class="container">
<h1>Shorter title</h1>
<h2>Subtitle</h2>
</div>
</header>
Unfortunately, popular browsers such as Google Chrome have failed to implement support for gap used in conjunction with a display: flex layout.
Is there a way I can implement this using e.g. display: inline-block elements and negative margins such that it will work in legacy browsers like Chrome and Internet Explorer?
Instead of gap: .5rem, use margin-right: .5rem on the h1.
h1 {
margin-right: .5rem;
}
.container {
max-width: 800px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
header {
font-family: sans-serif;
background-color: rebeccapurple;
color: #fff;
padding: 0 5px;
}
<header>
<div class="container">
<h1>Long title for the page itself</h1>
<h2>Subtitle</h2>
</div>
</header>
<br />
<header>
<div class="container">
<h1>Shorter title</h1>
<h2>Subtitle</h2>
</div>
</header>
I am trying to vertically and horizontally centre images within a javascript slideshow, however, I cannot figure out how to make this work,
I have tried display: inline-block with vertical-align: center; but it wont work
Any suggestions?
CSS
img {
height: 100%;
width: 100%;
max-height: 100vh;
max-width: 100vh;
object-fit: contain;
}
.slideshow-container img {
display: block;
margin: 0px auto;
}
HTML
<div class="slideshow-container">
<div class="mySlides fade">
<img src="001%20(1).jpg" onclick="plusSlides(1)">
</div>
<div class="mySlides fade">
<img src="001%20(1).jpg" onclick="plusSlides(1)">
</div>
<div class="nextprevious">
<a class="prev" onclick="plusSlides(-1)">←</a>
<a class="next" onclick="plusSlides(1)">→</a>
<div class="numbertext"><span>003</span> / <span>003</span></div>
</div>
You should check out display: flex, and justify-content: center; and align-content: center; properties.
.slideshow-container {
min-height: 100vh;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
.mySlides {
margin: 0px auto; /* horizontal align center in div */
}
The following code works in all modern browsers that I've tested (safari, chrome and firefox) except internet explorer. I'm trying to vertically and horizontally center an image inside logo. The problem is that the img overflows the container which is 50px 50px. If I remove flexbox from the css, the image does not overflow, but then it is no longer centered.
I've had a look at Flexbugs to try and solve the issue. But no luck. Any suggestion is much appreciated.
html
<div class="content">
<ul>
<li>
<section class="post">
<div class="post-header">
<div class="logo">
<img src="#" alt="">
</div>
</div>
</section>
</li>
</ul>
</div>
css
.content {
max-width: 400px;
padding-left: 1em;
padding-right: 1em;
}
.logo {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid #000;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
float: left;
height: 50px;
width: 50px;
}
img {
max-height: 100%;
max-width: 100%;
}
So I've got this header with three elements in them.
What I want is basically this:
http://jsfiddle.net/zktbfmqo/2/
Only with vertically centered content in each of the divs as well.
Is there an easy and clever way to do this without using absolutes etc?
Vertical-align: middle doesn't seem to do much, but that property isn't always easy to work with either.
HTML:
<div id="container">
<div class="box1">Text</div>
<div class="box2">Text</div>
<div class="box3">Text</div>
<span class="stretch"></span>
</div>
CSS:
#container {
border: 2px dashed #444;
height: 125px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
min-width: 612px;
}
.box1, .box2, .box3 {
width: 150px;
height: 125px;
vertical-align: middle;
display: inline-block;
*display: inline;
zoom: 1;
text-align: center;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
First you can achieve the same result in a better way by using Flexbox.
For vertical align text to the middle you can simply approach that by adding the line-height property and set it to the same exact height of the container div so in your case it would be 125px or if you used flexbox it can be done with align-items: center , and here is the final code:
.wrapper {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap; /* Safari 6.1+ */
flex-flow: row nowrap;
-webkit-justify-content: space-between; /* Safari 6.1+ */
justify-content: space-between;
font-weight: bold;
height: 125px;
min-width: 612px;
padding: 5px;
border: 2px dashed #444;
}
.wrapper > div{
display: -webkit-flex;
display: flex;
-webkit-flex-basis: 150px;
flex-basis: 150px;
justify-content: center;
align-items: center;
}
.aside-1, .aside-3{
background: #ccc
}
.aside-2{
background: #0ff;
}
<div class="wrapper">
<div class="aside aside-1">text1</div>
<div class="aside aside-2">text2</div>
<div class="aside aside-3">text3</div>
</div>
Flexbox to the rescue!
Good resources:
https://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/flexbugs
#container {
display: flex; /* magic maker */
justify-content: space-between; /* set equal space between boxes */
border: 2px dashed #444;
height: 125px;
/* just for demo */
min-width: 612px;
}
.box1, .box2, .box3, .box4 {
display: flex; /* magic maker */
/*
shorthand for flex-grow, flex-shrink, and flex-basis properties
we don't want the boxes to grow or shrink, and the basis is the explicit
width we want them
*/
flex: 0 0 150px;
justify-content: center; /* horizontally center text within */
align-items: center; /* vertically center text within */
height: 125px;
}
.box1, .box3 {
background: #ccc
}
.box2, .box4 {
background: #0ff
}
<div id="container">
<div class="box1">Text</div>
<div class="box2">Text</div>
<div class="box3">Text</div>
</div>
you can use display:table/table-cell and using a workaround with border-collapse/spacing + margin you will get the desired output.
#wrap {
border: 2px dashed #444;
height: 125px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
overflow:hidden;
/* just for demo */
width: 612px;
}
#container {
margin: 0 -81px; /*must be equal to border-spacing */
}
#table {
display: table;
table-layout: fixed;
border-collapse: separate;
border-spacing: 81px 0;
width: 100%;
}
.box1,
.box2,
.box3,
.box4 {
width: 150px;
height: 125px;
vertical-align: middle;
display: table-cell;
text-align: center;
}
.stretch {
width: 100%;
vertical-align: middle;
display: table-cell;
}
.box1,
.box3 {
background: #ccc
}
.box2,
.box4 {
background: #0ff
}
<div id="wrap">
<div id="container">
<div id="table">
<div class="box1">Text</div>
<div class="box2">Text</div>
<div class="box3">Text</div>
<span class="stretch"></span>
</div>
</div>
</div>
Are you familiar with Bootstrap?
It is a CSS Framework made by Twitter.
Put this inside of your head -
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
Use this in your body to see what it does, there's great docs on it.
<div class="container"> <!-- Creates margin -->
<div class="row"> <!-- Read docs on rows, they're awesome! -->
<div class="col-lg-4"> <!-- 1 -->
<!-- Just to take up space -->
</div>
<div class="col-lg-4"> <!-- 2 -->
<!-- YOUR CONTENT GOES HERE -->
</div>
<div class="col-lg-4"> <!-- 3 -->
<!-- Just to take up space -->
</div>
</div> <!-- ./row -->
</div> <!-- ./container -->
Now inside of the 2nd ./col-lg-4 div all of that content will be perfectly centered in the screen with the text aligned left.
If you want to align center the text, replace
<div class="col-lg-4"> <!-- 2 -->
with
<div class="col-lg-4 text-center"> <!-- 2 -->
Hope this helps!