i need my text elements to be in the middle of the div and beside my canvas element. currently, the texts are beside but aren't in the middle. how can i achieve this effect?
Btw, the canvas contains a chart plugin which i did not include in the code snippets below.
#user-count {
height: 100px;
width: 100px;
}
.card {
background-color: #f4f4f4;
border: none;
padding:10px;
display: inline-block;
}
.card-body {
font-weight: 600;
text-transform: uppercase;
display: inline-block;
}
<div class="row">
<div class="col-md-6">
<div class="card">
<canvas id="user-count"></canvas>
<div class="card-body">
<span>current blood donors</span>
<span>as of 2017</span>
</div>
</div>
</div>
Something like that with Flex :)
#user-count {
height: 100px;
width: 100px;
background-color: red;
}
.card {
background-color: #f4f4f4;
border: none;
padding: 10px;
display: inline-block;
display: flex;
justify-content: center;
align-items: center;
}
.card-body {
font-weight: 600;
text-transform: uppercase;
display: inline-block;
}
<div class="row">
<div class="col-md-6">
<div class="card">
<canvas id="user-count">
</canvas>
<div class="card-body">
<span>current blood donors</span>
<span>as of 2017</span>
</div>
</div>
</div>
You can add this css..
#user-count {
vertical-align: middle;
}
.card {
background-color: #f4f4f4;
border: none;
padding: 10px;
display: flex;
align-items: center;
}
So you can use display:flex instead of inline-block. flex is a bit similar to inline-block but not same and use align-items:center which centers all element to center vertically
Related
I have created a circle pointing to the next circle with arrow mark. Now I want to add text above the circle like STEP1, STEP2.
Below is the code snippet which I have tried
.connected-steps {
display: flex;
width: 100%;
align-items: center;
}
.step {
color: white;
background-color: black;
display: block;
border-radius: 100px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.connector {
padding: 0px 10px;
}
<div class="connected-steps">
<div class="step">1</div>
<div class="connector">></div>
<div class="step">2</div>
<div class="connector">></div>
<div class="step">3</div>
</div>
You could create a container for each step
<div class="container-step">
<div>text</div>
<div class="step"></div>
</div>
if you want the text to be white, you can move
color: white;
in the css from .step to .container-step
I am trying to create div which serves as my menu selection of my website. I want it to put into the center of my parent div. I did a lot of experiment but none of it work. Below is my CSS Code
.cell {
color: white;
font-size: .8rem;
padding: 1rem;
}
.lt-main-menu {
grid-area: main-menu;
background: deepskyblue;
height: 80vh;
}
.lt-menu{
background: black;
width: 100px;
height: 100px;
display: inline-block;
margin: 0 auto;
vertical-align:middle;
text-align:center;
/*
display:table-cell;
vertical-align:middle;
text-align:center;
*/
}
and this is my html file
<div class="cell lt-main-menu">
<div class="lt-menu">
menu 1
</div>
<div class="lt-menu">
menu 2
</div>
<div class="lt-menu">
menu 3
</div>
...
</div>
What i want is similar to picture below.
Hi i have created a pen in the CodePen app.
Using Flex you can easily center vertically and horizontally.
.lt-main-menu {
/*...*/
display:flex;
justify-content: center;
align-items: center;
}
This is the pen https://codepen.io/alessandroinfo/pen/JQPrYm
Try something like that, using flex properties:
<style type="text/css">
.cell {
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.lt-menu {
margin: 10px 0;
}
</style>
<div class="cell lt-main-menu">
<div class="cell-wrapper">
<div class="lt-menu">menu 1</div>
<div class="lt-menu">menu 2</div>
<div class="lt-menu">menu 3</div>
</div>
</div>
Try using display: flex to align items. This is a sample code. Hope this helps
HTML
<div class="d-flex flex-row align-items-start m-2">
<div class="container-block">
</div>
<div class="container-block">
</div>
<div class="container-block">
</div>
<div class="container-block">
</div>
</div>
<div class="d-flex flex-row align-items-center justify-content-center m-2">
<div class="container-block">
</div>
<div class="container-block">
</div>
<div class="container-block">
</div>
<div class="container-block">
</div>
</div>
CSS
.d-flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.align-items-start {
align-items: flex-start;
}
.align-items-center {
align-items: center;
}
.justify-content-center {
justify-content: center;
}
.container-block {
width: 100px;
height: 100px;
background: black;
margin: 0 5px;
}
.m-2 {
margin: 0.5rem;
}
JS Fiddle Link : https://jsfiddle.net/SJ_KIllshot/dbguqy6w/
This will do the job. I always find flexbox to work best for aligning things like this.
.cell {
color: white;
font-size: .8rem;
padding: 1rem;
}
.lt-main-menu {
width: 100%;
background: deepskyblue;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.lt-menu {
background: black;
width: 100px;
height: 100px;
margin: 0 10px;
text-align: center;
display: inline-block;
}
Demo: https://jsfiddle.net/trethewey/qs1kvuf5/16/
Try this.
.cell {
position: relative;
color: white;
font-size: .8rem;
padding: 1rem;
}
.box-containers {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.lt-main-menu {
grid-area: main-menu;
background: deepskyblue;
height: 80vh;
}
.lt-menu{
background: black;
width: 100px;
height: 100px;
display: inline-block;
margin: 0 auto;
vertical-align:middle;
text-align:center;
/*
display:table-cell;
vertical-align:middle;
text-align:center;
*/
}
<div class="cell lt-main-menu">
<div class="box-containers">
<div class="lt-menu">
menu 1
</div>
<div class="lt-menu">
menu 2
</div>
<div class="lt-menu">
menu 3
</div>
</div>
</div>
You can also have some other references HERE.
I want to align text content and the avatar circle. Here are the classes that I have defined
.user-detail {
display: inline-block;
text-transform: uppercase;
text-align: right;
.user-detail__username {
margin: 18px 16px 0px 10px;
display: block;
float: left;
font-size: $font-size;
font-weight: 500;
}
.user-detail__role {
margin: 18px 16px 0px 10px;
display: block;
font-size: $font-size * 0.9;
font-style: normal;
line-height: 13px;
font-weight: 300;
}
.user-detail__avatar-circle {
display: inline-block;
margin: 8px 11px 0px 0px;
width: 45px;
height: 45px;
border-radius: 50%;
border: 1px solid $lightstroke;
}
.user-detail__avatar {
position: relative;
font-size: 51px;
line-height: 43px;
left:-4px;
}
}
and here is the HTML markup
<div class="user-detail right">
<div style="display:inline-block">
<span class="user-detail__username">
Adminstrator
</span>
<span class="user-detail__role">Adminstrator</span>
</div>
<div class="user-detail__avatar-circle">
<i class="material-icons user-detail__avatar">account_circle</i>
</div>
</div>
it shows like this here
I want to text and avatar circle should be bottom aligned. If I inspect element there is space on the top of text div. If I could remove this space problem will be solved. But I don't know how could I do that? Even changing the margin of text div not working? Any help?
As usual, what is a pain to achieve with traditional CSS (float, margin, inline-block, etc.) is a breeze with Flexbox.
.user-detail {
width: 300px;
height: 100px;
border: blue solid 2px;
display: flex;
align-items: center;
justify-content: center;
}
.user-detail>div {
border: green solid 2px;
}
.user-detail .details {
display: flex;
flex-direction: column;
}
<div class="user-detail right">
<div class="details">
<span class="user-detail__username">
Adminstrator
</span>
<span class="user-detail__role">Adminstrator</span>
</div>
<div class="user-detail__avatar-circle">
<i class="material-icons user-detail__avatar">account_circle</i>
</div>
</div>
You should use Flexbox is less pain.
Try making your
.user-detail {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
More about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The vertical-align: top setting normally align and positions your div element to top , in your case the "Administrator" text.
You need to change your html as (check the second <div> tag in the below code for the change),
<div class="user-detail right">
<div style="display:inline-block;vertical-align: top">
<span class="user-detail__username">
Adminstrator
</span>
<span class="user-detail__role">Adminstrator</span>
</div>
<div class="user-detail__avatar-circle">
<i class="material-icons user-detail__avatar">account_circle</i>
</div>
</div>
Hope this helps!
I have the following snippet of html that forms an X-Y scrollable listbox
* {
font-family: "consolas";
}
.listbox {
border: 1px solid black;
padding: 4px;
width: 150px;
height: 200px;
display: flex;
flex-direction: column;
}
.caption {
font-weight: bold;
background-color: #aaf;
padding: 10px;
}
.content {
flex-grow: 1;
overflow: scroll;
}
.item {
background-color: #ddd;
padding: 2px;
padding-left: 6px;
margin-top: 4px;
white-space: nowrap;
}
<div class="listbox">
<div class="caption">Caption</div>
<div class="content">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three (this has a longer bit)</div>
<div class="item">Four</div>
<div class="item">Five</div>
<div class="item">Six</div>
<div class="item">Seven</div>
<div class="item">Eight (so does this)</div>
<div class="item">Nine</div>
<div class="item">Ten</div>
</div>
</div>
It's working fine, with one problem, as the user scrolls from left to right, the background of the div seems to get left behind. It's as though the actual div only stretches the width of its parent, and the scrolling/overflow thing is "faked" somehow.
Why is this the case?
How do I address the problem? The behaviour I want is for all the items to appear to be the same width as the largest one.
Try adding a container <div class="items"> around the items set it to display:inline-block.
.items {
display: inline-block;
}
* {
font-family: "consolas";
}
.listbox {
border: 1px solid black;
padding: 4px;
width: 150px;
height: 200px;
display: flex;
flex-direction: column;
}
.caption {
font-weight: bold;
background-color: #aaf;
padding: 10px;
}
.content {
flex-grow: 1;
overflow: scroll;
}
.items {
display: inline-block;
}
.item {
background-color: #ddd;
padding: 2px;
padding-left: 6px;
margin-top: 4px;
white-space: nowrap;
}
<div class="listbox">
<div class="caption">Caption</div>
<div class="content">
<div class="items">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three (this has a longer bit)</div>
<div class="item">Four</div>
<div class="item">Five</div>
<div class="item">Six</div>
<div class="item">Seven</div>
<div class="item">Eight (so does this)</div>
<div class="item">Nine</div>
<div class="item">Ten</div>
</div>
</div>
</div>
Explanation: by default a block level element takes 100% width of the container no more than that, however an inline block will expand to content length if available e.g. in a scrollable container.
Also apply .items {min-width: 100%;} in case you want the background to grow full width even with less text in every row.
How do I target just the text inside the div in order to make the numbers center in the circles? https://jsfiddle.net/Amidi/nevg4gcq/3/
<div class="beads">1</div>
<div class="beads">2</div>
<div class="beads">3</div>
.beads{
background-color: coral;
border-radius: 100%;
height: 35px;
width: 35px;
text-align: center;
color: whitesmoke;
margin-top: 5px;
}
Just give line-height: 35px; to make text center. line-height equals to height of the div.
Working Fiddle
Use display:table for parent and display: table-cell for cell. You must have child element for this approach.
Try this:
.beads {
background-color: coral;
border-radius: 100%;
height: 35px;
width: 35px;
text-align: center;
color: whitesmoke;
margin-top: 5px;
display: table;
}
.beads span {
display: table-cell;
vertical-align: middle;
}
<div class="beads"><span>1</span>
</div>
<div class="beads"><span>2</span>
</div>
<div class="beads"><span>3</span>
</div>
<div class="beads"><span>4</span>
</div>
<div class="beads"><span>5</span>
</div>
<div class="beads"><span>6</span>
</div>
<div class="beads"><span>7</span>
</div>
Fiddle here
try this:
.beads{
background-color: coral;
border-radius: 100%;
height: 35px;
width: 35px;
text-align: center;
color: whitesmoke;
margin-top: 5px;
line-height: 35px
}
<div class="beads">1</div>
<div class="beads">2</div>
<div class="beads">3</div>