Is there any way to center .polygon_container and .polygon vertically and horizontally? Also is there a possibility to make the size of it responsive like the <img> tag below?
http://cichyone.linuxpl.eu/ranestwen/ex/
I've tried text-align, margin auto etc and nothing works.
When I set it in the middle using margin-left and margin-top it is working only for one resolution.
Just Use following css
.slider .polygon_container {
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin: auto;
color: white;
height: 500px;
text-align: center;
width: 500px;
z-index: 99999;
}
.slider .polygon {
color: white;
height: 500px;
margin: auto;
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
width: 500px;
z-index: 99999;
}
You can easily use flexbox.
.owl-item > div {
display: flex;
justify-content: center;
align-items: center;
}
You can Center the polygon div using tansform:
I created the following HTML:
<div class="polygon_container">
<div class="polygon">
<h1>hello</h1>
</div>
</div>
And for that I´m using this css:
body
{
margin: 0;
padding: 0;
}
.polygon_container
{
width: 100%;
height: 100%;
background: red;
}
.polygon
{
width: 50%;
height: 50%;
background: white;
transform: translateX(50%) translateY(50%);
}
Hope this is a solution for you.
Yes it is possible. Try this.
.polygon_container {
position: absolute;
height: 500px;
width: 500px;
top: 50%;left: 50;
margin-left: -250px;
margin-top: -250px;
}
html, body {
height: 100%;width: 100%;
margin: 0;padding: 0;
}
.container {
height: 100%;width: 100%;
background: url('http://cichyone.linuxpl.eu/ranestwen/ex/assets/img/slider1/1.png') no-repeat;
background-size: cover;
}
.polygon_container {
position: absolute;
height: 100px;
width: 100px;
left: 50%;top: 50%;
margin-top: -50px;
margin-left: -50px;
}
.polygon_container .polygon {
background: #fff;
height: 100%;
width: 100%;
transform: rotate(45deg);
}
<div class="container">
<div class="polygon_container">
<div class="polygon"></div>
</div>
</div>
.slider .polygon_container {
width: 500px;
height: 500px;
position: absolute;
z-index: 99999;
text-align: center;
color: white;
margin: 0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Updated your class.
Related
I'm trying to keep the aspect ratio while resizing div like this:
.item {
display: flex;
flex-direction: column;
position: absolute;
background-color: white;
height: 20rem;
width: 20rem;
min-height: 10rem;
min-width: 10rem;
background-color:green;
resize: both;
overflow: hidden;
}
.item_img {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
background-image: url(https://i.ibb.co/NYCtjSn/unknown.png);
background-repeat: no-repeat;
background-size: contain;
}
<div class="item">
<div class="item_img" draggable="false"></div>
</div>
but I'm trying to replace the image with pure css instead of having to keep a link to load image:
.item {
display: flex;
flex-direction: column;
position: absolute;
background-color: green;
height: 20rem;
width:20rem;
min-height: 10rem;
min-width: 10rem;
resize: both;
overflow: hidden;
}
.item_img {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
.unknown_icon {
height: 100%;
width: 100%;
background-color: gray;
position: relative;
overflow: hidden;
}
.unknown_icon::before {
content: "";
position: absolute;
height: 35%;
width:35%;
border-radius: 50%;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
}
.unknown_icon::after {
content: "";
position: absolute;
height: 80%;
width: 80%;
border-radius: 50%;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
background-color:white;
}
<div class="item">
<div class="item_img unknown_icon"></div>
</div>
But when you resize this one it does not keep the aspect ratio like in the previous one with the image
How do I solve this problem? perhaps with aspect-ratio?
try
.item_img {
position: relative;
display: inline-block;
width: 100%;
height: auto;
}
Use aspect-ratio. Although it be irregular after resizing:
.item {
display: flex;
flex-direction: column;
position: absolute;
background-color: green;
height: 20rem;
width: 20rem;
min-height: 10rem;
min-width: 10rem;
resize: both;
overflow: hidden;
}
.item_img {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
.unknown_icon {
height: 100%;
width: 100%;
background-color: gray;
position: relative;
overflow: hidden;
}
.unknown_icon::before {
content: "";
position: absolute;
aspect-ratio: 1 / 1; /* here */
width: 35%;
border-radius: 50%;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
}
.unknown_icon::after {
content: "";
position: absolute;
aspect-ratio: 1 / 1; /* here */
width: 80%;
border-radius: 50%;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
}
<div class="item">
<div class="item_img unknown_icon"></div>
</div>
I have an extremely simple issue. I have nested divs. where I am trying to center a div(.gridcontainer) in div(.main). If you run the below snippet, you can see that the div does center full in the main div. It leaves the spaces uneven on the either side horizontally and vertically.
I have tried a lot of fixes and even tried dynamically centering them on load through JS. But, somehow it does not achieve the results.
I just want it to be the exact size of the parent but have little spaces left on each sides evenly.
body {
margin: 0;
padding: 0;
}
.tops {
position: fixed;
background: rgba(0,0,0,0.70);
margin: 0px;
padding: 0px;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-height: 100vh;
min-width: 100vw;
height: auto;
width: auto;
overflow: hidden;
}
.top_menu {
position: relative;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 70px;
background-color: green;
overflow: hidden;
}
.welcome {
position: relative;
top: 0;
bottom: 0;
left: 0;
min-height: 100vh;
min-width: 50%;
height: auto;
width: auto;
}
.welcome_message {
font-family: 'Palanquin Dark', sans-serif;
font-size: calc(2.5vw + 3vh);
position: relative;
top: 30%;
left: 50%;
margin: 0;
float: left;
color: white;
display: inline-block;
overflow: hidden;
transform: translate(-50%, -30%);
}
.app_name {
font-size: calc(1.5vw + 2vh);;
}
.gradientText {
background: -webkit-linear-gradient(#FFA07A, #8B0000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.downloadButton{
position: absolute;
top: 75%;
left:50%;
background-color: white;
width: 225px;
height: 50px;
border-radius: 25px;
border-width: 0px;
display: inline-block;
overflow: hidden;
transform: translate(-50%, -75%);
transition: all .2s ease-in-out;
}
.downloadButton:hover
{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: translate(-50%, -75%) scale(1.1);
}
.downloadText {
position: relative;
text-align: center;
top: 50%;
transform: translateY(-50%);
font-size: 1.4em;
font-weight: bold;
color: black;
}
.iphone {
position: relative;
top: 0;
bottom: 0;
right: 0;
min-height: 100vh;
min-width: 50%;
height: auto;
width: auto;
}
.iXFrame {
position: absolute;
height: 700px;
width: 350px;
top: 45%;
left: 50%;
transform: translate(-50%, -45%);
}
.main {
position: absolute;
display: block;
margin-top: 75px;
height: auto;
overflow: hidden;
width: auto;
min-width: 100vw;
min-height: 50vh;
}
.gridcont{
position : absolute;
/*height: auto;*/
width: auto;
/*min-height: 95vh;*/
min-width: 95vw;
margin: 0;
border-radius: 20px;
display: inline-block;
background-color: whitesmoke;
/*overflow: hidden;*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
<link href="https://fonts.googleapis.com/css?family=Changa+One|Montserrat|Palanquin+Dark|Paytone+One|Rubik|Rubik+Mono+One" rel="stylesheet">
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<section class="mains ui">
<div
class="tops"></div>
<!--.top_menu-->
<div class="ui grid marg-reset">
<div class="doubling two column row">
<div class="ui column welcome">
<h1 class="welcome_message"><span class="app_name">Example</span><br>we will<br>rock <br>you<br><span class="gradientText">Text</span></h1>
<a class="downloadButton" type="button" href="/app">
<div class="downloadText">Download Spotmi</div>
</a>
</div>
</div>
</div>
<div class="main">
<div class="ui grid gridcont">
<div class="doubling two column row">
<div class="ui column show_text">
<h1 class="emotion_message">Hello world</h1>
</div>
<div class="ui column emotion_show"></div>
</div>
</div>
</div>
</section>
This also poses an issue in the responsive nature of the site. Below are two screenshots. one of a HiDPI Laptop screen and other is a iphone X simulator. This even poses an issue there.
iPhoneX size screen.
Laptop Screen.
How exactly can I solve this?
Have you tried giving the giving the internal div that you want to center CSS properties:
position: relative;
top: 50%;
left 50%;
transform: translate(-50%, -50%);
this usually solves my balancing issues xD
What I need is
x[]x
AND
x
[]
x
dynamically maintaining aspect ratio with WIDTH and HEIGHT. Think object-fit but for div.
Example of the problem: https://codepen.io/anon/pen/erRvGx?editors=1111
What I have tried without much success
.AspectRatio {
height: 0;
overflow: hidden;
padding-top: 56.25%;
background: white;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.video {
background: yellow;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
like this ?
.box1 { width: 200px; height: 100px; position: relative; background-color: red; margin-bottom: 20px; }
.box2 { width: 100px; height: 150px; position: relative; background-color: red; margin-bottom: 20px; }
.box3 { width: 300px; height: 300px; position: relative; background-color: red; margin-bottom: 20px; }
.video { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: yellow; }
<div class="box1">
<div class="video"></div>
</div>
<div class="box2">
<div class="video"></div>
</div>
<div class="box3">
<div class="video"></div>
</div>
top: 50%; left: 50%; transform: translate(-50%, -50%); this code solves the problem
So I'm having some issues with putting a some content with putting some content below my hero / jumbotron image. The underline stuff is not important! It is animtated on load with some jquery. Code Below:
JSFiddle
I want to "What we do" content below the jumbotron image
HTML:
<div class="hero">
<div class="hero-text">
<h1 class="invis-selection">Header Text</h1>
<div id="underline-1"></div>
<div id="underline-2"></div>
<div id="underline-3"></div>
<div id="underline-4"></div>
</div>
<img class="hero-img" src="img/city-night.png" alt="Hero Image" />
</div>
<div class="wwd-main">
<h1>What we do</h1>
</div>
CSS:
.hero{
position: fixed;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-family: 'Lato', sans-serif;
}
.hero-text {
position: absolute;
width: 640px;
height: 125px;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.hero-text h1{
position: absolute;
width: 640px;
height: 125px;
font-size: 7.1em;
z-index: 1;
margin-top: -15px;
}
.hero-img {
width: 100%;
height: 100%;
}
.wwd-main {
position: relative;
height: 30%;
background-color: #eeeeee;
z-index: 100;
}
This will solve your problem, however as your screen gets vertically smaller you will notice the text at the bottom slowly disappearing. This is because you are using %'s to define the dimensions of the elements, as the screen shrinks the box will be smaller relative to your screen size. To solve this, change the 10% I used for .wwd-main to 90px.
body {
margin: 0;
padding: 0;
}
.hero{
position: fixed;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-family: 'Lato', sans-serif;
}
.hero-text {
position: absolute;
width: 640px;
height: 125px;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.hero-text h1{
position: absolute;
width: 640px;
height: 125px;
font-size: 7.1em;
z-index: 1;
margin-top: -15px;
}
.hero-img {
width: 100%;
height: 100%;
}
.wwd-main {
position: fixed;
bottom:0;
width:100%;
height: 10%;
background-color: #eeeeee;
z-index: 100;
}
<div class="hero">
<div class="hero-text">
<h1 class="invis-selection">Header Text</h1>
</div>
<img class="hero-img" src="http://www.mrwallpaper.com/wallpapers/Shanghai-City-Night-1920x1080.jpg" alt="Hero Image" />
</div>
<div class="wwd-main">
<h1>What we do</h1>
</div>
edit: What I did to solve the issue was change .wwd-main from position:relative; to position:fixed; and added bottom:0; This ensures the text will always be fixed to the bottom of your screen with a 0px offset.
You could just remove position: fixed; from .hero.
And add this to your CSS, to collapse the margins:
.wwd-main > h1
{
margin: 0;
}
You have defined the Height and Width of the text twice.
Here is the changed version of the code.
You can now customize your styling to make it look the way you want.
PS: I would recommend you to use Bootstrap or any other libraries.
body {
margin: 0;
padding: 0;
}
.hero{
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-family: 'Lato', sans-serif;
}
.hero-text {
position: fixed;
width: 640px;
height: 125px;
top: 20%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.hero-text h1{
position: absolute;
width: 640px;
height: 125px;
font-size: 7.1em;
z-index: 1;
margin-top: -15px;
}
.hero-img {
width: 100%;
height: 100%;
}
.wwd-main {
position: relative;
height: 20%;
background-color: #eeeeee;
z-index: 100;
}
<div class="hero">
<div class="hero-text">
<h1 class="invis-selection">Header Text</h1>
</div>
<img class="hero-img" src="http://www.mrwallpaper.com/wallpapers/Shanghai-City-Night-1920x1080.jpg" alt="Hero Image" />
</div>
<div class="wwd-main">
<h1>What we do</h1>
</div>
JSFiddle Link
I have a problem with centering div in HTML (vertical & horizontal). My code looks something like this:
<div id="container">SOME HTML</div>
#container{
width: 366px;
height: 274px;
margin: 50%;
top: -137px;
left: -188px;
position:absolute;
}
Only chrome center this div in to the middle of the screen.
This will center the <div> horizontally:
#container{
width: 366px;
height: 274px;
margin: 0 auto;
}
Centering vertically is not quite simple, you maybe have to use javascript for that, or you try this css solution.
#container{
width: 366px;
height: 274px;
top: 50%;
left: 50%;
margin: -137px 0 0 -188px;
position:absolute;
}
This does the trick (vertical & horizontal):
#container{
position: absolute;
width: 366px;
height: 274px;
left: 50%;
top: 50%;
margin-left: -183px; /* half width */
margin-top: -137px; /* half height */
}
You could use:
#container {
// Your other values, but remove position: absolute;
margin: 0 auto;
}
Alternatively, you can do:
#wrapper, #container {
border: 1px solid red;
height: 500px;
width: 600px;
}
#wrapper {
bottom: 50%;
right: 50%;
position: absolute;
}
#container {
background: yellow;
left: 50%;
padding: 10px;
position: relative;
top: 50%;
}
And you're HTML code:
<div id="wrapper">
<div id="container">
<h1>Centered Div</h1>
<p>
This div has been centered within your browser window.</p>
</div>
</div>
That will center the <div> in the middle of the browser window.
Try this one:
<div class="cont">
<div class="box"></div>
</div>
Css:
.cont{
background-color: tomato;
width: 600px;
height: 400px;
position: relative;
}
.box {
width:100px;
height:100px;
background-color: teal;
color:#fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
Should be fine to use just CSS:
here is the demo
#container{
width: 366px;
height: 274px;
margin: 50%;
top: 50%;
left: 50%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}