Im trying to make a piano, but im starting by the basics.
Im dweling with centering the inside content of the div.
I want the to be right in the middle and centered inside his father div
heres the code:
html
<div class="keys">
<div class="key" id="keyA">
<kbd>A</kbd>
</div>
<div class="key" id="keyS">
<kbd>S</kbd>
</div>
</div>
css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: chocolate;
}
.keys{
padding: 4px 5px;
position: fixed;
height: 40%;
max-height: 60%;
width: 60%;
max-width: 80%;
display: flex;
justify-content: space-around;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: white solid;
align-items: center;
text-align: center;
}
.key{
border: black solid 1px;
font-family: 'Montserrat', sans-serif;
font-size: 22px;
max-height: 95%;
height: 90%;
width: 70px;
max-width: 95%;
border-radius: 10px;
}
kbd{
/*border to see the with and weight*/
border: pink solid 1px;
color: aliceblue;
}
heres a fiddle: https://jsfiddle.net/hnd9jr4y/
thank you
Flexbox is only working on the direct content of a flexbox container. To additonal center the Name of the keys add to .key additional 'flex-settings'.
Have a look to the example below:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: chocolate;
}
.keys{
padding: 4px 5px;
position: fixed;
height: 40%;
max-height: 60%;
width: 60%;
max-width: 80%;
display: flex;
justify-content: space-around;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: white solid;
align-items: center;
text-align: center;
}
.key{
border: black solid 1px;
font-family: 'Montserrat', sans-serif;
font-size: 22px;
max-height: 95%;
height: 90%;
width: 70px;
max-width: 95%;
border-radius: 10px;
/* JUST ADD */
display: flex;
align-items: center;
justify-content: center;
}
kbd{
/*border to see the with and weight*/
border: pink solid 1px;
color: aliceblue;
}
<div class="keys">
<div class="key" id="keyA">
<kbd>A</kbd>
</div>
<div class="key" id="keyS">
<kbd>S</kbd>
</div>
</div>
Use flexbox
.key{
border: black solid 1px;
font-family: 'Montserrat', sans-serif;
font-size: 22px;
max-height: 95%;
height: 90%;
width: 70px;
max-width: 95%;
border-radius: 10px;
display: flex;
align-items: center; // vertical centering
justify-content: center; // horizontal centering
}
Related
Building from scratch I managed to create a box with a border.
Doing so I also managed to add the logo to the middle.
Now I want to add background image but it always crashes the complete box.
My current result:
<div style="
float: left;
width: 300px;
border-radius: 25px;
border: 2px solid #000000;
height: 150px;
position: relative;
background: #fff;
display: flex;
align-items: center;
justify-content: center;">
<img style="border-radius: 50%; height: 50%;"src="imageURL" />
</div>
With background image:
https://jsfiddle.net/2t3a5wvn/
<div style="
background-image: url("imageurl");
float: left;
width: 300px;
border-radius: 25px;
border: 2px solid #000000;
height: 150px;
position: relative;
background: #fff;
display: flex;
align-items: center;
justify-content: center;">
<img style="border-radius: 50%; height: 50%;"src="imageURL" />
</div>
Expected result:
You need to escape the quotes or use single quotes in background-image. Make sure to remove the background property as well.
<div style="
background-image: url('imageurl');
float: left;
width: 300px;
border-radius: 25px;
border: 2px solid #000000;
height: 150px;
position: relative;
display: flex;
align-items: center;
justify-content: center;">
<img style="border-radius: 50%; height: 50%;"src="imageURL" />
</div>
Here you go
the css
<style>
* {
box-sizing: border-box;
}
.box {
border: 1px solid black;
border-radius: 25px;
height: 150px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
.center-image {
position: absolute;
height: 50%;
aspect-ratio: 1;
border-radius: 50%;
background-color: black;
}
.top-image {
width: 100%;
height: 50%;
background-color: red;
align-self: start;
flex-shrink: 0;
}
.info {
display: flex;
justify-content: space-between;
align-items: start;
padding: 20px;
width: 100%;
flex-shrink: 1;
}
.name {
color: #333;
font-weight: bold;
font-size: 30px;
}
.distance {
border: 1px solid black;
padding: 3px 5px;
border-radius: 5px;
}
</style>
the html
<div class="box">
<img class="center-image" />
<img class="top-image" />
<div class="info">
<div class="name">Dein Shopname</div>
<div class="distance">36 km</div>
</div>
</div>
Edit: this would make the layout similar to the one in the image
I have a Circle Div in my Footer and want to Center it into the Footer.
At the End there will be 3 Circles in a Row.
My CSS:
.circle {
height: 50px;
width: 50px;
background-color: rgba(0, 0, 0, 0.90);
border-radius: 50%;
text-align: center;
font-size: 30px;
}
footer {
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
background-color: green;
}
You can use display:flex and align-items & justify-content to align it both vertically and horizontally.
body, html {
padding: 0;
margin: 0;
}
footer {
width: 100%;
background-color: #dedede;
border-radius: 5px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.circle {
border-radius: 50%;
width: 40px;
height: 40px;
background-color: black;
}
<footer>
<div class="circle"></div>
</footer>
The interview-box-container is where it should be when using flexbox, but I can't align any of the internal elements of the div.
Text-align doesn't influence the text b/c of flexbox; tried to do w/o flexbox and used vertical-align: center w/o luck.
Hoping to find a solution where I can use flexbox and be able to align internal content/elements inside the box.
body {
height: 100%;
width: 100%;
}
.interview-banner {
width: 100%;
height: 95px;
background-color: #19283B;
position: fixed;
z-index: 1;
}
.interview-background {
background-color: #F4F8FB;
min-height: 100vh;
height: 100%;
}
.interview-box-container {
/*align-items: center;
justify-content: center;
display: flex;
flex-direction: row;*/
vertically-align: center;
}
.interview-box {
position: relative;
border: 2px solid black;
max-width: 625px;
width: 100%;
min-height: 446px;
/*display: flex;
flex-direction: column;
align-items: center; */
padding: 35px;
background: white;
margin-top: 100px;
margin-bottom: 80px;
}
/*should be sitting on the right*/
.interview-box>button {
position: absolute;
bottom: 35px;
width: 108px;
height: 41px;
font-family: OpenSans-Light;
font-size: 15px;
text-align: center;
color: #FFFFFF;
background-color: #19283B;
border: 1px solid #19283B;
border-radius: 4px;
}
/*should be on the left*/
.interview-box > p {
text-align: right;
color: red;
}
<div class="interview-banner"></div>
<section class="interview-background">
<h2 class="interview-header">Header Text</h2>
<div class="interview-box-container">
<div class="interview-box">
<p>Explanation text</p>
<button>Button Text</button>
</div>
</div>
</section>
You can set justify-content: center; in .interview-box-container and few other tweaks such as removing position:absolute from button (see comments in snippet)
Note: there isn't value center for property vertical-align, the closest you find is the middle value
body {
height: 100%;
width: 100%;
margin: 0
}
.interview-banner {
width: 100%;
height: 95px;
background-color: #19283B;
position: fixed;
z-index: 1;
}
.interview-background {
background-color: #F4F8FB;
min-height: 100vh;
height: 100%;
}
.interview-box-container {
display: flex;
justify-content: center; /*align box in center */
}
.interview-box {
/*position: relative; */
border: 2px solid black;
max-width: 625px;
min-height: 446px;
display: flex;
flex-direction: row-reverse; /* to make button on left and text on right*/
align-items: center; /* align the text and button vertically*/
justify-content: space-between; /* items are evenly distributed in the line; first item is on the start line, last item on the end line*/
padding: 35px;
background: white;
margin: 100px 0 80px
}
.interview-box>button {
/* position: absolute;
bottom: 35px;*/
width: 108px;
height: 41px;
font-family: OpenSans-Light;
font-size: 15px;
text-align: center;
color: #FFFFFF;
background-color: #19283B;
border: 1px solid #19283B;
border-radius: 4px;
}
.interview-box>p {
color: red;
}
<div class="interview-banner"></div>
<section class="interview-background">
<h2 class="interview-header">Header Text</h2>
<div class="interview-box-container">
<div class="interview-box">
<p>Explanation text</p>
<button>Button Text</button>
</div>
</div>
</section>
Although I don't know what is your point with this markup, it can be simplified like this:
body {
height: 100%;
width: 100%;
margin: 0
}
.interview-banner {
width: 100%;
height: 95px;
background-color: #19283B;
position: fixed;
z-index: 1;
}
.interview-background {
background-color: #F4F8FB;
min-height: 100vh;
height: 100%;
}
.interview-box-container {
border: 2px solid black;
max-width: 625px;
min-height: 446px;
display: flex;
flex-direction: row-reverse; /* to make button on left and text on right*/
align-items: center; /* align the text and button vertically*/
justify-content: space-between; /* items are evenly distributed in the line; first item is on the start line, last item on the end line*/
padding: 35px;
background: white;
margin: 100px auto 80px
}
.interview-box-container>button {
/* position: absolute;
bottom: 35px;*/
width: 108px;
height: 41px;
font-family: OpenSans-Light;
font-size: 15px;
text-align: center;
color: #FFFFFF;
background-color: #19283B;
border: 1px solid #19283B;
border-radius: 4px;
}
.interview-box-container>p {
color: red;
}
<div class="interview-banner"></div>
<section class="interview-background">
<h2 class="interview-header">Header Text</h2>
<div class="interview-box-container">
<p>Explanation text</p>
<button>Button Text</button>
</div>
</section>
You can try margin to align the box and flex inside it by using space-between :
body {
height: 100%;
width: 100%;
}
.interview-banner {
width: 100%;
height: 95px;
background-color: #19283B;
position: fixed;
z-index: 1;
}
.interview-background {
background-color: #F4F8FB;
min-height: 100vh;
height: 100%;
}
.interview-box {
position: relative;
border: 2px solid black;
max-width: 625px;
width: 100%;
min-height: 446px;
margin:100px auto 80px;
display: flex;
align-items: center;
padding: 35px;
background: white;
margin-top: 100px;
margin-bottom: 80px;
justify-content:space-between;
}
.interview-box>button {
width: 108px;
font-family: OpenSans-Light;
font-size: 15px;
text-align: center;
color: #FFFFFF;
background-color: #19283B;
border: 1px solid #19283B;
border-radius: 4px;
}
.interview-box>p {
text-align: right;
color: red;
}
<div class="interview-banner"></div>
<section class="interview-background">
<h2 class="interview-header">Header Text</h2>
<div class="interview-box-container">
<div class="interview-box">
<p>Explanation text</p>
<button>Button Text</button>
</div>
</div>
</section>
I'm trying to create a UI element that remains centered and the image scales to the size of the container. I have additional caption and text over the image. But the image seems to scale proportionally over only some of the range when I adjust the height or width. Preferably using only CSS and HTML. The top-level div does need to be absolutely positioned. I'm indifferent to the use of flexbox. That was just one tact I've tried.
Here it is as a codepen.
And the full code is below, though it is easier to play with it in the codepen as you can adjust the results pane easily. (open up the console so you can also adjust height.)
.block {
/* this needs to remain an absolute positioned block with size and location expressed in percent */
position: absolute;
height: 80%;
width: 80%;
top: 10%;
left: 10%;
background-color: #777777;
/* Don't care if using flexbox */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
}
.imagecontain {
position: relative;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}
.image {
max-height: inherit;
max-width: calc(100% - 8px);
padding: 0 !important;
border: 4px solid #123456 !important;
}
.button {
border-color: #b2b2b2;
background-color: #f8f8f8;
color: #444;
position: relative;
display: inline-block;
margin: 0;
padding: 0 12px;
min-width: 52px;
min-height: 47px;
border-width: 1px;
border-style: solid;
border-radius: 2px;
vertical-align: top;
text-align: center;
text-overflow: ellipsis;
font-size: 16px;
line-height: 42px;
cursor: pointer;
box-shadow: 0px 0px 3px #888888 !important;
}
.overimage {
vertical-align: bottom;
position: absolute;
bottom: 10%;
left: 50%;
max-width: 80%;
min-width: 60%;
padding: 5px;
opacity: .7;
transform: translateX(-50%);
background-color: black;
color: white;
border-radius: 10px;
z-index: 2;
}
.name {
text-align: bottom;
background-color: white;
padding: 5px;
border: 1px solid black;
}
<div class="block">
<div class="imagecontain">
<div class="overimage">this is a test of the emergency broadcast</div>
<img class="button image" src="https://scontent-dfw1-1.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/582520_10151526852434301_1015227082_n.jpg?oh=6537667094d5a160b8fbab0728dc2f5a&oe=57971FCB">
</div>
<div class="name">Mountains</div>
</div>
Use the background-size properties in CSS. Change your image from an tag to the background of the div. The specific property you're looking for is probably
background-size: cover;
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Add:
.imagecontain {
max-width: 100%;
width: 100%
}
Remove:
.block {
height: 80%;
}
I have a page where I'm displaying the status of two websites -- as in if they're currently up and running, or not. If the site is up, I want the block to have a light green background, and if not, a light red one. And the site's name should be centered inside the block.
This is what I've tried so far:
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
#smallcontainer {
width: 208px;
height: 100px;
margin: 200px auto auto;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
}
<div id="container">
<div id="smallcontainer">
<div class="status"></div>
<div class="status"></div>
</div>
</div>
It works (see full screen output), but I feel like I'm way off. How do I do something simple as this using CSS, the correct way? I feel like my code is a hack. And how would you write the text exactly in the center of the block, vertically and horizontally?
And is it possible to have it such a way that it works across all desktop screen sizes? Maybe I should specify width and height in percentage as opposed to pixels?
You can use flexbox. support
HTML
<div id="container">
<div class="status"></div>
<div class="status"></div>
</div>
CSS
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
margin-left: 2px;
border: 1px solid #ccc;
}
http://jsfiddle.net/b9n3h1en/
Try this Fiddle, aligned text vertically and horizontally in center of the div.
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
#smallcontainer {
width: 208px;
height: 100px;
text-align: center;
margin: 200px auto auto;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
line-height: 100px;
}
Try this jsfiddle
body {
font-family: sans-serif;
}
#container {
width: 100%;
height: 400px;
margin: 0 auto;
border: 1px solid #ccc;
position:relative;
}
#smallcontainer {
width: 208px;
height: 100px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: vertical;
box-pack: center;
box-align: center;
text-align:center;
}
Also see more about "display:flexbox"
https://developer.mozilla.org/en-US/docs/Web/CSS/display
Here's how I'd do it:
HTML:
<div id="container">
<div id="smallcontainer">
<div class="status">
<div class="border">
<div class="txt">Text Here</div>
</div>
</div>
<div class="status">
<div class="border">
<div class="txt">More Text Here</div>
</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
#container {
width: 95%;
height: 400px;
margin: 0 auto;
border: 1px solid #ccc;
position: relative;
}
#smallcontainer {
width: 208px;
height: 100px;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.status {
height: 100%;
width: 50%;
float: left;
text-align: center;
padding: 2px;
}
.border {
background: #efefef;
border: 1px solid #ccc;
width: 100%;
height: 100%;
position: relative;
}
.txt {
position: relative;
top: 50%;
transform: translateY(-50%);
}
See the fiddle here: http://jsfiddle.net/bootsified/kf7Lbq24/
You can add negative margins to each of the divs you want to put exactly in the center. Note that for this the width and height should be in pixels.
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
border: 1px solid #ccc;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -300px;
}
#smallcontainer {
width: 208px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -104px;
margin-top: -50px;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
}
<div id="container">
<div id="smallcontainer">
<div class="status"></div>
<div class="status"></div>
</div>
</div>