I've been pulling my hair out trying to make a div center itself vertically.
The div itself contains an svg image, some text below the image, and is floated right and displayed inline-block. To the left of the image, also in the container div, is some text displaying the title. If the text of the title is rendered across >1 lines, the image must float in the middle.
This means that the height is dynamic and i won't know in advance.
I have tried the table solution to this problem, but cannot get it to work due to the div i want to vertically center is already display: inline-block and cannot figure out how to make it work for display: table.
.like-container {
}
.like-div {
display: inline-block;
float: right;
font-size: 10px;
margin-right: 100px;
}
.title {
font-size: 40px;
width: calc(100% - 100px);
}
<div class="like-container">
<div class="like-div">
<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><slices/><sliceSourceBounds x="12.691" y="27.241" width="269.84" height="254.219" bottomLeftOrigin="true"/></sfw></metadata><path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653 c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z"/><path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194 c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758 c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504 c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481 c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809 C268.403,168.538,290.992,168.011,278.918,147.336z"/></svg>
<span>Like</span>
</div>
<div class="title">
This is the Title!
</div>
</div>
I created a plnkr to help show you how it looks: http://plnkr.co/edit/qzqTjQ8W7jl72nRKd6Sj
Sweet jesus help me!
I suggest to use flexbox + align-items for centering + order for controlling the position, width your existing markup, see the support details, and relevant prefixes.
jsfiddle
.like-container {
display: flex;
align-items: center;
}
.like-div {
font-size: 10px;
margin-right: 100px;
order: 1;
}
.title {
font-size: 40px;
flex: 1;
}
If you need to support IE9, you can use this CSS table layout, but you'll need to adjust the markup, place <div class="title"> before <div class="like-div">.
jsfiddle
.like-container {
display: table;
width: 100%;
}
.title, .like-div {
display: table-cell;
vertical-align: middle;
}
.title {
font-size: 40px;
width: 100%;
}
.like-div {
font-size: 10px;
padding-right: 100px;
}
You can achieve vertical centering by using Flexbox. Here is the code
fiddle: https://jsfiddle.net/qbyxkf71/
HTML
<div class="like-container">
<div class="title">This is the Title!</div>
<div class="like-div">
<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve">
<path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653 c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z" />
<path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194 c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758 c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504 c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481 c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809 C268.403,168.538,290.992,168.011,278.918,147.336z" />
</svg> <span>Like</span>
</div>
</div>
CSS
.like-container {
border:1px solid;
display:flex;
align-items:center;
}
.like-div {
display: inline-block;
float: right;
font-size: 10px;
margin-right: 100px;
}
.title {
font-size: 40px;
width: calc(100% - 100px);
}
you may use direction and drop float : (for old browsers)
.like-container {
direction: rtl;
}
.like-div {
display: inline-block;
font-size: 10px;
vertical-align: middle;
width: 2em;
direction: ltr;
}
.title {
font-size: 40px;
width: calc(100% - 0.65em);
display: inline-block;
vertical-align: middle;
direction: ltr;
}
<div class="like-container">
<div class="like-div">
<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><slices/><sliceSourceBounds x="12.691" y="27.241" width="269.84" height="254.219" bottomLeftOrigin="true"/></sfw></metadata><path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653 c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z"/><path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194 c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758 c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504 c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481 c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809 C268.403,168.538,290.992,168.011,278.918,147.336z"/></svg>
<span>Like</span>
</div>
<div class="title">
This is<br/> the Title!
</div>
</div>
or use display:flex; for young browsers (most efficient IMHO )
.like-container {
display: flex;
flex-direction: row-reverse
}
.like-div {
font-size: 10px;
margin: auto;
}
.title {
font-size: 40px;
flex: 1
}
<div class="like-container">
<div class="like-div">
<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><slices/><sliceSourceBounds x="12.691" y="27.241" width="269.84" height="254.219" bottomLeftOrigin="true"/></sfw></metadata><path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653 c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z"/><path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194 c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758 c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504 c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481 c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809 C268.403,168.538,290.992,168.011,278.918,147.336z"/></svg>
<span>Like</span>
</div>
<div class="title">
This is<br/> the Title!
</div>
</div>
this may help you, here is a centered div in the most general form
div {
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div>my div here</div>
Related
I have some trouble aligning an svg I am new to this thing. I want to see it as a whole and place it at the center of the main container. Need your help guys. Thanks in advance.
<div class="main-container">
<h1>Hi</h1>
<svg class="morph" viewBox="0 0 1119 619" preserveAspectRatio="none">
<path d="M735.75,229.593c61.129-5.951,122.258-90.759,179.219-89.271s127.815,53.562,166.715,72.9,140.318,49.1,148.654,130.931-16.672,141.346-13.893,187.469,11.114,196.4-186.165,193.42-220.9-122-327.873-89.271-104.2,111.588-308.423,89.271S136.965,405.159,184.2,356.06s33.343-117.54,112.533-119.028,138.929-37.2,205.615-38.684S674.622,235.544,735.75,229.593Z" fill="#EFE9F5" opacity="0.5"/>
</svg>
</div>
.css
.main-container {
position: relative;
padding: 0 0 0 20px;
float: right;
width: calc(100% - 240px);
}
svg.morph {
position: absolute;
margin: 0;
background-color: #00ff1f;
}
Please use the correct viewBox="168 140 1065 600" value.
.main-container {
position: relative;
padding: 0 0 0 20px;
float: right;
width: calc(100% - 240px);
height:100vh;
}
svg.morph {
position: absolute;
margin: 0;
max-width:100%;
background-color: #00ff1f;
}
<div class="main-container">
<h1>Hi</h1>
<svg class="morph" viewBox="168 140 1065 600" preserveAspectRatio="none">
<path d="M735.75,229.593c61.129-5.951,122.258-90.759,179.219-89.271s127.815,53.562,166.715,72.9,140.318,49.1,148.654,130.931-16.672,141.346-13.893,187.469,11.114,196.4-186.165,193.42-220.9-122-327.873-89.271-104.2,111.588-308.423,89.271S136.965,405.159,184.2,356.06s33.343-117.54,112.533-119.028,138.929-37.2,205.615-38.684S674.622,235.544,735.75,229.593Z" fill="#EFE9F5" opacity="0.5"/>
</svg>
</div>
Center with position absolute:
position absolute:
left:50%;
top:50%;
transform: translate(-50%, -50%);
.main-container {
position: relative;
padding: 0 0 0 20px;
float: right;
width: calc(100% - 240px);
border: 2px solid red; /*<<<<<<<<<<<<<<<<<<<<< Added to see container limit */
}
svg.morph {
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
margin: 0;
background-color: #00ff1f;
}
<div class="main-container">
<h1>Hi</h1>
<svg class="morph" viewBox="0 0 1119 619" preserveAspectRatio="none">
<path d="M735.75,229.593c61.129-5.951,122.258-90.759,179.219-89.271s127.815,53.562,166.715,72.9,140.318,49.1,148.654,130.931-16.672,141.346-13.893,187.469,11.114,196.4-186.165,193.42-220.9-122-327.873-89.271-104.2,111.588-308.423,89.271S136.965,405.159,184.2,356.06s33.343-117.54,112.533-119.028,138.929-37.2,205.615-38.684S674.622,235.544,735.75,229.593Z" fill="#EFE9F5" opacity="0.5"/>
</svg>
</div>
This question already has answers here:
How can I create an inset curved background that works with a background gradient and overlapping transparent shapes?
(2 answers)
Closed 2 years ago.
I want to add a section which should be curved inwards on top and bottom, having an image in the background. I tried using svg and path but could not get the desired result.
I have inserted below a link of an image which is the result that I want.
section {
padding: 60px 0;
position: relative;
}
<section id="statistics" data-dir="up" style="background-image: url(https://hero.jpg); background-size: cover; background-position: center; background-attachment: fixed;" class="statistics-section text-white parallax">
<svg id="bigHalfCircleCandy" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
<path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>
</section>
Here's one way to do it.
:root, html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
#header {
height: 20%;
width: 100%;
}
#main {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 80%;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.5)), center / cover no-repeat url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSGvXdNxVmnn-fpjDeYYX-BqwD4mzPn6D79pw&usqp=CAU");
}
#top {
width: 100%;
height: 35%;
background: white;
clip-path: ellipse(65% 80% at center -40%);
}
#center {
width: 100%;
flex: 1;
color: white;
font-size: 1.5em;
text-align: center;
font-family: 'Helvetica Neue', sans-serif;
}
#bottom {
width: 100%;
height: 35%;
background: white;
clip-path: ellipse(65% 80% at center 140%);
}
<div id="header"></div>
<div id="main">
<div id="top"></div>
<div id="center">
Some Interesting Facts About Us
</div>
<div id="bottom"></div>
</div>
<div id="footer"></div>
You can use the same path and rotate it by 180 degrees, then absolutely position it on the bottom of the section. To make sure the elements heights fits I had to add an explicit heights on the section element.
section {
margin: 60px 0;
height: 400px;
position: relative;
}
#statistics {
background: url(https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2015/01/blend-mode-example-screenshot.png);
background-size: cover;
background-attachment: fixed;
background-position: center;
}
#bigHalfCircleCandyBottom {
transform: rotate(180deg);
position: absolute;
bottom: 0;
left: 0;
}
<section id="statistics" data-dir="up" class="statistics-section text-white parallax">
<svg id="bigHalfCircleCandy" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
<path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>
<svg id="bigHalfCircleCandyBottom" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
<path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>
</section>
A more complete example along with a container for the text in the middle can be found in this Fiddle.
Supposedly, all SVG presentation attributes can be used as CSS properties.
And yet preserveAspectRatio appears to be observed only when it is an inline property, not through CSS.
html, body { width: 100%; height: 100%; margin: 0; }
.wrapper {
width: 50%; height: 10%;
}
.box {
padding: 10px; margin: 5px;
border: 5px solid #888; border-radius: 5px;
background-color: #eee; color: #000;
position: relative;
}
rect.rfoo { fill: #8af; }
svg.myrect1 {
position: absolute;
preserveAspectRatio: none;
left:0; top:0; width:100%; height:100%;
}
svg.myrect2 {
position: absolute;
left:0; top:0; width:100%; height:100%;
}
<div class="box wrapper">
<svg class="myrect1" viewBox="0 0 300 200">
<rect class="rfoo" x="25" y="25" width="250" height="150"></rect>
</svg>
</div>
<div class="box wrapper">
<svg preserveAspectRatio="none" class="myrect2" viewBox="0 0 300 200">
<rect class="rfoo" x="25" y="25" width="250" height="150"></rect>
</svg>
</div>
Why?
preserveAspectRatio is not a presentation attribute.
I know this is asked a lot, and that z-index cannot work on items that aren't positioned. Yet, I'm clearly missing something here. The goal is to have my header cover most of the page initially, and on a click move up to reveal the body content.
body {
margin: 0;
overflow: hidden;
}
header {
text-align: center;
height: 95vh;
margin: 0;
position: relative;
z-index: 9999;
box-shadow: 0px 5px 10px;
padding-top: 10px;
}
.leaf {
height: 50px;
transform: rotate(135deg);
position: absolute;
bottom: 0;
margin: 0px 0px 20px -25px;
}
.categories {
width: 100%;
text-align: center;
position: absolute;
top: 12%;
z-index: 1;
}
.chars {
border: 1px solid black;
}
<header>
<h1>Title Placeholder</h1>
<svg class="leaf" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M219.388,46.202c-45.273,7.148-86.333,28.057-118.741,60.466l-7.059,7.059C52.895,154.42,30.486,208.523,30.486,266.07
c0,52.508,18.666,102.144,52.846,141.346L0,490.747L21.253,512l83.33-83.33c39.202,34.18,88.838,52.846,141.346,52.846
c57.548,0,111.65-22.41,152.343-63.102l7.059-7.059c32.409-32.408,53.318-73.469,60.466-118.741L512,0L219.388,46.202z
M436.11,287.924c-6.152,38.957-24.144,74.288-52.03,102.176l-7.059,7.059c-68.705,68.705-178.36,72.098-251.119,10.193
l239.44-239.439l-21.253-21.253L104.647,386.1c-61.904-72.759-58.512-182.414,10.194-251.119l7.059-7.059
c27.888-27.887,63.219-45.879,102.176-52.03l251.79-39.756L436.11,287.924z"/>
</g>
</g>
</svg>
</header>
<div class="categories">
<h2>Characteristics</h2>
<div class="chars leaves"></div>
<div class="chars fruit"></div>
<div class="chars flowers"></div>
<div class="chars twigs"></div>
<div class="chars other"></div>
</div>
IF I understand correctly what you want, there is no z-index issue. Everything is correctly positioned.
The only thing missing is that the header has a transparent background. Adding background-color: white; to the header block in the CSS makes it work.
Can you help me to understand why my svg refuse to resize the height for helping me to center vertically in a div container ?
How can I process for align vertical svg in a container ? I seem to svg behaviour is not standard like div...
The main idea is that center horizontally AND vertically svg into a div.
I try this : https://jsfiddle.net/gbz7rp7u/1/#&togetherjs=0n9iL62pHv
<div id="svg-container">
<svg id="svg-1" height="50%" width="50%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle r="15" cx="350" cy="80"></circle>
</svg>
</div>
#svg-container
{
background-color: red;
}
#svg-1
{
margin: auto auto;
display: block;
height: 30%;
}
html, body {
height: 100%;
}
#svg-container
{
display: flex;
align-items: center;
background-color: red;
height: 100%;
}
#svg-1
{
margin: 0 auto;
display: block;
}
<div id="svg-container">
<svg id="svg-1" height="15px" width="15px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle r="15" cx="15" cy="15"></circle>
</svg>
</div>
html, body {
height: 100%;
}
#svg-container {
background-color: red;
height: 100%;
}
#svg-1 {
display: block;
margin: auto;
height: 100%;
}
<div id="svg-container">
<svg id="svg-1" height="15px" width="15px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle r="15" cx="15" cy="15"></circle>
</svg>
</div>