I'm struggling trying to align both vertically and horizontally what should be a CSS keyboard.
I believe I got horizontal aligning right (by specifying width and margin:auto) but I can't understand how to align that vertically.
HTML:
<body>
<div class="maindocu">
<div class="keyboard">
<div class="first_row">
<div class="key">Q</div>
<div class="key">W</div>
<div class="key">E</div>
<div class="key">R</div>
<div class="key">T</div>
<div class="key">Y</div>
<div class="key">U</div>
<div class="key">I</div>
<div class="key">O</div>
<div class="key">P</div>
</div>
<div class="second_row">
<div class="key">A</div>
<div class="key">S</div>
<div class="key">D</div>
<div class="key">F</div>
<div class="key">G</div>
<div class="key">H</div>
<div class="key">J</div>
<div class="key">K</div>
<div class="key">L</div>
</div>
<div class="third_row">
<div class="key">Z</div>
<div class="key">X</div>
<div class="key">C</div>
<div class="key">V</div>
<div class="key">B</div>
<div class="key">N</div>
<div class="key">M</div>
</div>
</div>
</div>
</body>
CSS:
a.maindocu{
min-height: 100%;
}
.keyboard{
display: block;
border-spacing: 5px;
margin: auto;
position: relative;
vertical-align: middle;
}
.first_row{
display: block;
margin: auto;
width: 550px;
}
.second_row{
display: block;
margin: auto;
width: 490px;
}
.third_row{
display: block;
margin: auto;
width: 440px;
}
.key{
display: table-cell;
width: 50px;
height: 50px;
border-spacing: 5px;
text-align: center;
vertical-align: middle;
font-family: "Verdana";
font-size: 100%;
color: #ffffff;
background: #000;
border: 5px solid #808080;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
JSFiddle: http://jsfiddle.net/fb58bpgj/
I have already read a few tutorials and tips and tricks but I can't figure this out. Any advice?
Thanks in advance!
Related
I don't understand why my viewport changes with this code. A scrollbar appears and I have to navigate across the page. I thought that calc height and width and using percentage would avoid this.
My understanding is that margin adds outside of the box and by doing 'calc(100vw - 20rem)'. I can effectively fit my html onto the page.
.activityText {
color: white;
font-size: medium;
font-weight: bold;
}
.hoursText {
color: white;
font-size:larger;
}
.dashboard {
display: flex;
flex-flow: column wrap;
row-gap: 20%;
width: calc(100vw - 20rem);
height: calc(100vh - 20rem);
margin: 20rem;
}
.userinfo {
width: 20%;
background-color: blue;
flex-basis: 100%;
border-radius: 50px;
}
.panel {
position: relative;
width: 20%;
flex-basis: 40%;
border-radius: 50px;
}
.colorPane {
position: absolute;
width: 100%;
background-color: rgb(6, 132, 136);
height: 100%;
border-radius: 50px;
}
.activity {
position: absolute;
top: 20%;
width: 100%;
background-color: rgb(40, 38, 56);
height: 80%;
border-radius: 50px;
}
<body>
<div class="dashboard">
<div class="userinfo"></div>
<div class="panel">
<div class="colorPane"></div>
<div class="activity">
<div class="activityText"> Work </div>
<div class="hoursText"> 70 horus </div>
</div>
</div>
<div class="panel">
<div class="colorPane"></div>
<div class="activity"></div>
</div>
<div class="panel">
<div class="colorPane"></div>
<div class="activity"></div>
</div>
<div class="panel">
<div class="colorPane"></div>
<div class="activity"></div>
</div>
<div class="panel">
<div class="colorPane"></div>
<div class="activity">
</div>
</div>
<div class="panel">
<div class="colorPane"></div>
<div class="activity"></div>
</div>
</div>
</body>
The problem in an image
Need tabs to shrink while the main container doesn't fit all items by width.
Here is expected behavior:
http://adamschwartz.co/chrome-tabs/
But could it be done on pure css, flexbox may be?
Solution was pretty simple. Just display: flex; for container, and overflow: hidden; for tab items.
Don't know why my question was downvoted. :(
html {
font-family: sans-serif;
}
.container {
display: flex;
border: 1px solid silver;
padding: 10px 10px 0;
width: 400px;
margin: 0 auto 10px;
}
.tab {
overflow: hidden;
text-overflow: ellipsis;
height: 20px;
border: 1px solid silver;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
padding: 10px;
margin-right: 8px;
border-bottom: none;
}
.tab:last-child {
margin-right: 0;
}
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
</div>
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
<div class="tab">Chrome</div>
<div class="tab">Flexbox</div>
</div>
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
<div class="tab">Chrome</div>
<div class="tab">Flexbox</div>
<div class="tab">Stackoverflow</div>
</div>
I want to center automatically a div on my paga using bootstrap 3 but I cannot achieve it. I got an image (with a fixed responsive height) and I want the text to be centered (horizontally and verticaly)
I've made a bootly : https://www.bootply.com/4AyZFwlOdE
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.image {
height:500px;
background:yellow;
}
<div class="image">
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-8 col-lg-10 vcenter">
<div style="text-align:center; height:3em;border:1px solid #F00">Small</div>
</div>
</div>
</div>
</div>
<div class="image">
<div class="container">
<div class="row align-items-center">
<div class="col-xs-8 col-lg-8 col-md-offset-2" >
<div style=" border:1px solid #F00;"><img src="http://www.dm-3.com/wp-content/uploads/2013/06/example.png" stlye="margin:0 auto"></div>
</div>
</div>
</div>
</div>
CSS
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
line-height: 3em;
text-align:center;
height:3em;
border:1px solid #F00;
}
.image {
height:500px;
background:yellow;
}
https://www.bootply.com/uAp4vN69nk
Different ways of aligning content in the center(horizontal and vertical) given in the codepen link below:
.style2{
display: table;
width: 100%;
height: 30vh;
background-color: #8E113F;
margin-bottom: 20px;
div{
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}
}
https://codepen.io/kk2989/pen/LNjojY
.container{
background-color: gray;
}
.listing-row{
display: table;
width: 100%;
margin 0;
}
.listing-row-inner{
display: table-row;
background-color: yellow;
}
.tc{
display: table-cell;
border: 1px solid black;
}
.listing-row-image{
width: 30%;
}
.listing-row-content{
width: 70%;
}
.stretch {
width : 40px;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.abs{
position: absolute;
right: 20px;
top:0px;
background-color: #0BB7A5;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row container">
<div class="col-sm-8">
<div class="listing-row">
<div class="listing-row-inner">
<div class="tc listing-row-image" >left</div>
<div class="tc listing-row-content">
<span class="stretch">
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
</span>
<span class="abs">AA</span>
</div>
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
I Need to wrap the text in the right side respecting the left side and the column on the right in gray.
I have tried everything and searched on the internet, nothing seems to work.
I put min-width to the table-cell in the left side but then it takes space on the gray side.
add display:inline-block in stretch class and set your desire width
.container{
background-color: gray;
}
.listing-row{
display: table;
width: 100%;
margin 0;
}
.listing-row-inner{
display: table-row;
background-color: yellow;
}
.tc{
display: table-cell;
border: 1px solid black;
}
.listing-row-image{
width: 30%;
}
.listing-row-content{
width: 70%;
}
.stretch {
width : 40px;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.abs{
position: absolute;
right: 20px;
top:0px;
background-color: #0BB7A5;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row container">
<div class="col-sm-8">
<div class="listing-row">
<div class="listing-row-inner">
<div class="tc listing-row-image" >left</div>
<div class="tc listing-row-content">
<span class="stretch">
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
</span>
<span class="abs">AA</span>
</div>
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
I am using angular-material and materializecss. I'm not really strong with css but i tried to play with it and not much of results ...
I am trying to inline the avatar with the text so far i tried to use span with class to try style the text together with img but no success..
Best result i got so far is , text after avatar but slightly below avatar.
my HTML and custom css.
.gallery{
margin-bottom: 10px;
}
.responsive-img{
width: 100%;
}
.img-info{
text-align: center;
background: #b3e5fc;
color: black;
width: 100%;
margin-bottom: 10px;
padding: 10px 0;
}
.circle{
width: 60;
margin: 10px 5%;
}
.black-text{
text-align: center;
}
.circle .black-text{
display: inline;
}
<div class="row gallery">
<div class="col l3 col m4 col s12" ng-repeat="image in images">
<md-card class="z-depth-3">
<!--INSTAGRAM PHOTOS-->
<a>
<img class="responsive-img" ng-src="{{image.images.standard_resolution.url}}" alt="">
</a>
<!--USER AND AVATAR-->
<div class="img-info">
<img class="circle" ng-src="{{image.user.profile_picture}}">{{image.user.username}}
</div>
</md-card>
</div>
</div>
Use this:
.img-info img.circle{
vertical-align: middle;
}
And next time, share rendered HTML, the html you was shared is not useful.
snippet:
.img-info img.circle{
vertical-align: middle;
}
.gallery{
margin-bottom: 10px;
}
.responsive-img{
width: 100%;
}
.img-info{
text-align: center;
background: #b3e5fc;
color: black;
width: 100%;
margin-bottom: 10px;
padding: 10px 0;
}
.circle{
width: 60;
margin: 10px 5%;
}
.black-text{
text-align: center;
}
.circle .black-text{
display: inline;
}
<div class="row gallery">
<div class="col l3 col m4 col s12" ng-repeat="image in images">
<md-card class="z-depth-3">
<!--INSTAGRAM PHOTOS-->
<a>
<img class="responsive-img" ng-src="{{image.images.standard_resolution.url}}" alt="">
</a>
<!--USER AND AVATAR-->
<div class="img-info">
<img class="circle" src="http://dummyimage.com/50x50/000655/fff"> The text
</div>
</md-card>
</div>
</div>