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>
Related
I work with dynamicaly created boxes, and i have issues that text are not fiting inside box.
EX:
My code:
HTML:
<div class="box" id="box98" style="width: 110px; height: 43px;">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>
CSS:
.box {
background-color: #ccc;
margin: 10px;
border-radius: 10px;
text-align: center;
font-size: 10px;
}
.machine-icon {
vertical-align: middle;
float: left;
width: 40px;
height: 40px;
background-color: #808080;
border-radius: 20px;
margin: 2px;
}
.machine-icon > img {
margin-top: 25%;
width: 20px;
height: 20px;
}
.title-box {
color: #000;
font-size: 10px;
overflow: hidden;
font-weight: 600;
}
.desc-box {
color: #000;
}
So my idea was to not showing all text, just end, for example:
I try to use display: flex and justify-content: end; idea was, to add for title and sub title z-index: 1 and for image z-index: 2, and for box overflow: hidden;
But it's not working for me.
This could be done this way using white-space: nowrap; and direction: rtl;
.box {
background-color: #ccc;
margin: 10px;
border-radius: 10px;
text-align: center;
font-size: 10px;
}
.machine-icon {
vertical-align: middle;
float: left;
width: 40px;
height: 40px;
background-color: #808080;
border-radius: 20px;
margin: 2px;
}
.machine-icon>img {
margin-top: 25%;
width: 20px;
height: 20px;
}
.title-box {
color: #000;
font-size: 10px;
overflow: hidden;
font-weight: 600;
direction: rtl;
white-space: nowrap;
}
.desc-box {
color: #000;
}
<div class="box" id="box98" style="width: 110px; height: 43px;">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>
Remove Height from your in the .box element.
the height should be Auto:
<div class="box" id="box98" style="width: 110px; **height: auto;**">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>
Sorry guys.
I am new here and I just got stuck in this.
I have attached a weblink to the picture and code for css.
Everything the same.
Except when the label is a single line, the box shrinks.
I have given fixed width and height to it but still not working.
.product-box {
background: #fff;
padding: .5rem;
border-radius: 4px;
box-shadow: 0 2px 10px #dcdcdc;
cursor: pointer;
display: inline-block;
border-radius: 10px !important;
margin: 15px;
width: 100px;
height: 150px;
}
.product-image {
height: 100px;
width: 80px;
padding-left: 10px;
}
.product-label {
width: 80px;
padding-left: 11px;
height: 50px;
cursor: pointer;
}
.product-label-style {
cursor: pointer;
font-family: Rubik-Medium;
color: $app-greyish-brown;
font-weight: bold;
}
<div class="product-box" ng-click='ctrl.productClick()'>
<div class="product-image" ng-transclude>
</div>
<div class="product-label">
<label class="product-label-style">Commercial Vehicles</label>
</div>
</div>
<div class="product-box" ng-click='ctrl.productClick()'>
<div class="product-image" ng-transclude>
</div>
<div class="product-label">
<label class="product-label-style">Vehicles</label>
</div>
</div>
Wrap those ".product-box" to some div, let's name it .wrapper and then:
<div class="wrapper">
<div class="product-box" ng-click='ctrl.productClick()'>
...
</div>
<div class="product-box" ng-click='ctrl.productClick()'>
...
</div>
</div>
.wrapper {
display: flex;
align-items: flex-start;
}
.product-label {
width: 80px;
padding-left: 11px;
height: 50px;
cursor: pointer;
overflow: hidden;
}
Hey guys,
Thanks for the help.
I found the solution to it from a friend of mine.
Overflow hidden was it!
Okay so the desired outcome of this is to have the images on the left and the text sit to the right of the images, screenshot below:
.contact_bar {
width: 100%;
height: 50px;
background: #2c3e50;
color: #ffffff;
border-bottom: solid 2px #c9c9c9;
}
.contact_bar_container {
width: 1050px;
height: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.contact_bar_text {
width: 100%;
}
.contact_bar_call {
background-image: url(/images/call.png);
height: 32px;
width: 32px;
float: left;
margin-top: 8px;
float: left;
margin-right: 100px;
}
.contact_bar_email {
background-image: url(/images/email.png);
height: 32px;
width: 32px;
float: left;
margin-top: 8px;
}
<div class="contact_bar">
<div class="contact_bar_container">
<div class="contact_bar_call">
<div class="contact_bar_text">
Call here
</div>
</div>
<div class="contact_bar_email">
<div class="contact_bar_text">
Email here
</div>
</div>
</div>
</div>
I want the image to be left of the text and automatically understand when the first line of text (phone number) is finished it will then have the email image with a 5px margin and then the email image and address.
Here a solution using img html tag instead of background-image. I edited a bit your html code.
So you just have use a <img src="###" />tag instead of the <div class="contact_image"></div>
.contact_bar {
width: 100%;
height: 50px;
background: #2c3e50;
color: #ffffff;
border-bottom: solid 2px #c9c9c9;
}
.contact_bar_container {
width: 1050px;
height: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}
.contact_bar_content{
display: flex;
align-items: center;
padding: 0 15px;
}
.contact_image{
height: 15px;
width: 15px;
background-color: red;
margin-right: 5px;
}
<div class="contact_bar">
<div class="contact_bar_container">
<div class="contact_bar_content">
<div class="contact_image">
</div>
<div class="contact_bar_text">
Call here
</div>
</div>
<div class="contact_bar_content">
<div class="contact_image">
</div>
<div class="contact_bar_text">
Email here
</div>
</div>
</div>
</div>
I feel like this is really obvious but I couldn't seem to find any answers on here.
I'm trying to make 5 circular divs, inline, with a letter in the middle representing a grade. I then want the subject title below the grade (but still inside the circle).
Here's what I've written so far:
HTML:
<div class="subject">A</div>
<div class="subject">B</div>
<div class="subject">C</div>
<div class="subject">D</div>
<div class="subject">E</div>
CSS:
.subject {
display: inline-block;
background-color: gray;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-family: Arial;
border-radius: 100%;
color: white;
font-size: 100px;
Also, I couldn't seem to horizontally center the circles using:
margin: 0 auto;
or
margin-left: auto;
margin-right: auto;
.subject {
display: inline-block;
background-color: gray;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-family: Arial;
border-radius: 100%;
color: white;
font-size: 100px;
}
<div class="subject">A</div>
<div class="subject">B</div>
<div class="subject">C</div>
<div class="subject">D</div>
<div class="subject">E</div>
Any advice is appreciated, thanks!
Wrap the div's in a container and add text-align: center to it.
Use pseudo element :after to insert the subtitle. Check below example
.container {
text-align: center;
}
.subject {
border-radius: 100%;
display: inline-block;
background-color: gray;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-family: Arial;
border-radius: 100%;
color: white;
font-size: 100px;
position: relative;
}
.subject:after {
display: inline-block;
position: absolute;
font-size: 16px;
content: attr(data-sub);
left: 50%;
transform: translateX(-50%);
top: 30%;
}
<div class="container">
<div class="subject" data-sub="Maths">A</div>
<div class="subject" data-sub="French">B</div>
<div class="subject" data-sub="Biology">C</div>
<div class="subject" data-sub="German">D</div>
<div class="subject" data-sub="Chemistry">E</div>
</div>
You can do follows, i created another div and added text-align:center property.Now these group of circles are horizontally centered.
.subject {
display: inline-block;
background-color: gray;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-family: Arial;
border-radius: 100%;
color: white;
font-size: 100px;}
.circle{
text-align:center;
}
<div class="circle">
<div class="subject">A</div>
<div class="subject">B</div>
<div class="subject">C</div>
<div class="subject">D</div>
<div class="subject">E</div></div>
I want to have a centered grid of buttons that take up the full width, but I can't seem to get the container centered no matter what I try.
Here's the jsfiddle - https://jsfiddle.net/a6qo6tzL/
Thanks
<div class="Wrapper">
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
</div>
<div style="clear: both;"></div>
CSS
.Wrapper {
display:block;
margin: 0 auto;
width: 100%;
}
.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px;
float: left;
width: 250px;
text-align: center;
text-transform: uppercase;
}
Your main problem is that your gridButton has
float: left;
Instead, use
display: inline-block;
Now your buttons can move freely next to one another and be centered. Your wrapper element is already full width but you'll need to tell it to center its content:
.Wrapper {
display:block;
width: 100%;
text-align: center;
}
You can get rid of margin: 0 auto because that will only affect blocks with a known width.
.Wrapper {
display: block;
text-align: center;
width: 100%;
}
.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px;
display: inline-block;
width: 250px;
text-align: center;
text-transform: uppercase;
}
<div class="Wrapper">
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
</div>
<div style="clear: both;"></div>
You've got .Wrapper set to 100% width, so even though you have margin: auto, the container is full width and will not appear centered. Set it to a constant width at a higher breakpoint:
#media (min-width: 500px) {
.Wrapper {
width: 500px;
}
}
Then consider wrapping your buttons in a columns:
.cell {
float: left;
width: 50%;
}
Here is your updated fiddle.
Use flexbox:
.Wrapper {
display:flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
margin: 0 auto;
width: 100vw;
}
DEMO
I also replaced the width to viewport units
have a look here if this is what you want
https://jsfiddle.net/Raider/744wv0o7/
.Wrapper {
display:block;
margin: 0 auto;
width: 100%;
border:1px solid;
}
.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px auto;
/*float: left;*/
width: 250px;
text-align: center;
text-transform: uppercase;
}
Is this what you need?
.Wrapper {
display:block;
margin: 0 auto;
width: 100%;
}
.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px;
width: 250px;
text-align: center;
margin:auto;
text-transform: uppercase;
}
You where using float:left; property which prevents the div's from being centered