Is there a way to centralize text inside a bordered element?
When I do border at the element, maybe because its content size is reduced, it gets decentralized.
.circle {
width: 22px;
height: 22px;
border-radius: 50%;
border: solid #00b0ff 1px;
color: #00b0ff;
}
.button-styling {
color: #00b0ff;
font-size: x-large;
}
.outline-h {
outline: thin;
outline-color: blue;
outline-style: solid;
}
<div style="max-width: 15px;">
<h3> With border </h1>
<div class="circle">
<mat-icon class="button-styling">+</mat-icon>
</div>
</div>
<div style="max-width: 15px;">
<h3> Without border </h1>
<div class="outline-h">
<mat-icon class="button-styling">+</mat-icon>
</div>
</div>
You can use flexbox to center the text element:
.circle {
width: 22px;
height: 22px;
border-radius: 50%;
border: solid #00b0ff 1px;
color: #00b0ff;
/*Add*/
display: flex;
justify-content: center;
align-items: center;
}
<div style="max-width: 15px;">
<h3>With border</h3>
<div class="circle">
<mat-icon class="button-styling">+</mat-icon>
</div>
</div>
You could try this:
.circle {
text-align: center;
line-height: 20px;
}
I was able to center it using display: flex.
Check it's browser support though: https://caniuse.com/#feat=flexbox
.circle {
width: 22px;
height: 22px;
border-radius: 50%;
border: solid #00b0ff 1px;
color: #00b0ff;
display: flex;
justify-content: center;
align-items: center;
}
.button-styling {
color: #00b0ff;
font-size: x-large;
}
.outline-h {
outline: thin;
outline-color: blue;
outline-style: solid;
}
<div style="max-width: 15px;">
<h3> With border </h1>
<div class="circle">
<mat-icon class="button-styling">+</mat-icon>
</div>
</div>
<div style="max-width: 15px;">
<h3> Without border </h1>
<div class="outline-h">
<mat-icon class="button-styling">+</mat-icon>
</div>
</div>
Related
I am creating a simple vertical stepper component with html & css. And trying to design like this. I strucked in the css part some alignment issues are coming.
CSS
.steps-container .step::before {
display: inline-block;
content: "";
font-size: 10px;
color: #fff;
text-align: center;
background-color: #e1e1e1;
width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
right: 4px;
top: 2px;
}
.steps-container .step.active::before {
background-color: green;
}
.step-vertical {
border-left: 1px solid #e1e1e1;
margin-bottom: 5px;
margin-left: 5px;
}
HTML
<div>
<div class="steps-container">
<span class="step inactive">1</span>
<div class="step-vertical">
<div>
<h5 class="text-grey">label text 1</h5>
<button>Continue</button>
</div>
</div>
</div>
<div class="steps-container">
<span class="step active">2</span>
<div class="step-vertical">
<div>
<h5 class="text-grey">label text 2</h5>
<button>Continue</button>
</div>
</div>
</div>
</div>
.
From the output i want the numbers 1 and 2 inside the circle and label text should align next to the circle. I don't know how to achieve this. Ur suggestions are helpful.
Is this how you want it? added the :before css to span added display: inline-block; to .step-vertical to bring it next to the span.
.steps-container .step {
display: inline-block;
content: "";
font-size: 10px;
color: #fff;
text-align: center;
background-color: #e1e1e1;
/* width: 20px; */
/* height: 20px; */
border-radius: 50%;
position: relative;
right: 4px;
top: 2px;
padding: 5px 10px;
color: black;
vertical-align: top;
}
.steps-container .step.active::before {
background-color: green;
}
.step-vertical {
border-left: 1px solid #e1e1e1;
margin-bottom: 5px;
margin-left: 5px;
height:200px
}
h5{margin-top: 5px;
display: inline-block;}
button{
display:block
}
.ml-2{
margin-left:10px
}
<div>
<div class="steps-container">
<span class="step inactive">1</span>
<h5 class="text-grey">label text 1</h5>
<div class="step-vertical">
<div>
<textarea class="ml-2" name="" id="" cols="30" rows="10">
</textarea>
<button class="ml-2">Continue</button>
</div>
</div>
</div>
<div class="steps-container">
<span class="step inactive">2</span>
<h5 class="text-grey">label text 2</h5>
<div class="step-vertical">
<div>
<textarea class="ml-2" name="" id="" cols="30" rows="10"> </textarea>
<button class="ml-2">Continue</button>
</div>
</div>
</div>
</div>
I've got three div's going here. One's a container then the other 2 are in place for some buttons! But it just doesn't look right. I'm not quite sure how to fix it
.button {
display: inline-block;
padding: 20px 30px;
font-size: 12px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
.divButton {
height: 100%;
width: 100%;
background-color: #e4e4e4;
display: inline-block;
padding-bottom: 5px;
}
HTML:
<div class="divButton">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<!--2 buttons "centered"-->
<div style="float: left; padding-left: 325px;">
<p style="padding-left: 72px;">Centered text above button</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<!--add spacing to move away from 2 buttons-->
<div style="float: left; padding-left: 125px;">
<p style="padding-left: 40px;">TEXT</p>
<button class="button" style="float: right;">TEXT</button>
</div>
</div>
jsfiddle: https://jsfiddle.net/3ar1L0zy/1/
And what i'm trying to achieve in paint form!
I would move away from using floats - css has moved on sufficiently so you shouldn't need to use them anymore.
Use flex instead:
.button {
display: inline-block;
padding: 20px 30px;
font-size: 12px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
.divButton {
width: 100%; /* you don't really need this - divs are block elements which are 100% by default */
background-color: #e4e4e4;
padding: 0 20px 5px 20px;
box-sizing: border-box; /* as you have set the width, you need this to stop the div being 100% + 40px wide */
display:flex; /* this will align items in a row by default */
flex-wrap:wrap; /* this allows the content to wrap to multiple rows */
justify-content:space-between; /* this will push any content to either side of the row */
}
.divButton > p {
width:100%; /* make this take up full row */
}
.divButton > div {
text-align:center; /* use this to centre text - not padding */
}
<div class="divButton">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<!--2 buttons "centered"-->
<div>
<p>Centered text above button</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<!--add spacing to move away from 2 buttons-->
<div>
<p>TEXT</p>
<button class="button">TEXT</button>
</div>
</div>
One other tip I would give you is try not to use inline styles - they become very hard to maintain and make it harder to debug too (and cause a lot larger files as you have to repeat code for styles instead of just using a class that can be used multiple times but programmed once)
Instead of use float: left on both div, you can use float right on the right one and remove the padding-left you set:
<div class="divButton">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<!--2 buttons "centered"-->
<div style="float: left;">
<p style="padding-left: 72px;">TEXT</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<!--add spacing to move away from 2 buttons-->
<div style="float: right;">
<p style="padding-left: 40px;">TEXT</p>
<button class="button" style="float: right;">TEXT</button>
</div>
</div>
https://jsfiddle.net/3ar1L0zy/13/
you can achieve this too by using flexbox too. (better solution in my opinon)
HTML code:
<div class="divButton">
<h3 style="text-align: center; padding-top: 15px; color: black;">TEXT!</h3>
<!--2 buttons "centered"-->
<div class="divText">
<p style="padding-left: 72px;">TEXT</p>
<p style="padding-left: 40px;">TEXT</p>
</div>
<!--add spacing to move away from 2 buttons-->
<div>
<div class="divButtons">
<div>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<button class="button">TEXT</button>
</div>
</div>
</div>
CSS code:
.button {
display: inline-block;
padding: 20px 30px;
font-size: 12px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
.button:hover {
background-color: #880002;
}
.divButton {
height: 100%;
width: 100%;
background-color: #e4e4e4;
display: inline-block;
padding-bottom: 5px;
}
.divText {
display: flex;
justify-content: space-around;
}
.divButtons {
display: flex;
justify-content: space-around;
}
<div class="divButton" style="text-align: center;">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<div style="display: inline-block;">
<!--add spacing to move away from 2 buttons-->
<div style="float: right; display: inline-block; padding-left: 125px;">
<p style="text-align: center;">TEXT</p>
<button class="button" style="float: right;">TEXT</button>
</div>
<!--2 buttons "centered"-->
<div style="display: inline-block;">
<p style="text-align: center;">TEXT</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
</div>
</div>
https://jsfiddle.net/3ar1L0zy/85/
I would recommend flexbox
.parent{
background: tomato;
width: 400px;
padding: 30px;
display: flex;
flex-direction: column;
}
.header{
background: yellow;
text-align: center
}
.body{
background: green;
width: 100%;
display: flex;
}
.body-item{
background: pink;
width: 50%;
text-align: center;
padding: 10px;
}
.blue{
background: blue; /* to make it easier to see */
}
.buttons{
display: flex;
flex-wrap: wrap; /* wrap items onto multiple lines if needed, from top to bottom*/
justify-content: space-evenly; /* items are distributed so that the spacing between any two items (and the space to the edges) is equal */
}
<div class="parent">
<h3 class="header">HEADER TEXT</h3>
<section class="body">
<div class="body-item">
<div class="text">Text</div>
<div class="buttons">
<button>Button</button>
<button>Button</button>
</div>
</div>
<div class="body-item blue">
<div class="text">Text</div>
<div class="buttons">
<button>Button</button>
</div>
</div>
</section>
</div>
I know it is dumb question, but i am struggling with following problem
It is one of my menu buttons. I want div the represents icon (marked red with circle) be on the left side of the button and the text on the right (name (blue) above description (purple)). By the way, i am going to have plenty of those buttons and i want them appear in column (block).
My current problem is that icon div (red) and text div (green dashed) wont place inline.
My HTML is:
<style>
.HomeMenuNavbarButton {
text-decoration: none;
color : black;
border-style:outset;
border-width:4px;
border-radius:15px;
display:block;
padding:4px;
}
.circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
border-color: black;
border-style: dashed;
display: inline-block;
vertical-align: top;
}
</style>
<div class="container">
<div class="row">
#foreach (var node in Model.Nodes)
{
if (!(node.IsRootNode) && node.Children.Any())
{
<div class="col-md-4">
<button type="button" style="display:inline;" class="btn btn-info" data-toggle="collapse" data-target="#("#relatedNavList" + node.Title) ">#node.Title</button>
<div id="#("relatedNavList" + node.Title)" class="collapse">
#foreach (var child in node.Children)
{
<div class="HomeMenuNavbarButton" style="display:block;">
<div style="background-color:red;display:inline">
<div class="circle">
</div>
</div>
<div style="border-color: green; border-style: dashed; display:inline-block">
<div style="background-color:blue">#(child.Title)</div>
<div style="background-color:purple">#(child.Description)</div>
</div>
</div>
}
</div>
</div>
}
}
</div>
</div>
When you want to display stuff side by side in CSS, the easiest way is to use flexbox. Try to add display : flex; to your HomeMenuNavBar class.
Here is a complete document about flexbox from the Mozilla team.
Using a wrapper defined as a flexbox
.wrapper {
display: flex;
align-items: center;
justify-content: space-between;
width: 150px;
}
.circle {
height: 25px;
width: 25px;
border: medium dashed darkgray;
border-radius: 50%;
}
button {
background: dodgerblue;
color: white;
border-radius: 3px;
border: thin solid lightblue;
padding: 0.5em;
}
<div class="wrapper">
<button>Button</button>
<div class="circle"></div>
<span>Text</span>
</div>
You can do that just with display:inline-block on your button's elements
.elementButton
{
display:inline-block;
}
.circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
border-color: black;
border-style: dashed;
display: inline-block;
vertical-align: top;
}
.HomeMenuNavbarButton
{
display:block;
margin:5px;
}
<div class="HomeMenuNavbarButton">
<div class="circle elementButton">
</div>
<div class="elementButton">
<div>Title one</div>
<div>Content</div>
</div>
</div>
<div class="HomeMenuNavbarButton">
<div class="circle elementButton">
</div>
<div class="elementButton">
<div >Title two</div>
<div>Content</div>
</div>
</div>
My main goal is to have a simple frame (as you can see) with few text lines and images. The thing I want to do, is make this frame flexible. By that I mean - if I change picture inside of it (bigger -> smaller) the frame should change. It should stay fixed.
Online editor: https://www.bootply.com/Y09Zn1wir3#
HTML:
<div class="col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="first-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="second-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
CSS:
/* CSS used here will be applied after bootstrap.css */
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
margin: 0px 0px 15px 0px;
float: right;
}
.name{
padding: 20px 0px 0px 0px;
color: black;
height: 75px;
font-size: 18px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
}
.first-image{
width: 200px;
}
.second-image{
width: 150px;
}
.extra-info{
border-top: 1px solid orange;
}
.bottom-text{
padding-top: 15px;
height: 50px;
letter-spacing: 0.1em;
}
I tried to add height property to such as:
.single-image{
...
height: 405px;
}
Result: https://www.codeply.com/go/2s2hH3nbju
But it doesn't look correct, as bottom text floats somewhere up.
I need a solution for different type of image sizes. Any ideas?
You need to set the height of .img-wrap, too.
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
margin: 0px 0px 15px 0px;
float: right;
height: 405px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
height:250px;
overflow:hidden;
}
Try to add this new line in your css code.
.img-wrap{
min-height: 275px;
}
it will looks like this
Output
Try using flex
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
.name{
padding: 20px 0px 0px 0px;
color: black;
height: 75px;
font-size: 18px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
}
.first-image{
width: 200px;
}
.second-image{
width: 150px;
}
.extra-info{
border-top: 1px solid orange;
align-self: bottom;
}
.bottom-text{
padding-top: 15px;
height: 50px;
letter-spacing: 0.1em;
}
.images-wrap{
display: flex;
}
.single-image-wrap {
height: 100%;
margin-bottom: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row images-wrap">
<div class="col-xs-6 col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="first-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="second-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
</div>
From the below figure. I am changing the div(tab) styles based on the different page.
If the control is in page 1, I am displaying the tab with red color border.
Likewise,
If the control is in page 2, I am displaying the tab with red color border and filling the background of page 1 with other color.
Here, I need to use <HR> tag to connect these page1, page2 and page3.
My output should be like this..
Here is my code.
index.html
<html>
<head>
<style>
.outer{
margin: 0 10%;
padding: 50px 0;
border: 2px solid #666666;
}
.hidden-div
{
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
function showHide(divId) {
$("#"+divId).toggle();
}
</script>
</head>
<body>
<div id="hidethis" style="display:none">
<hr/>
<ons-row style="display: flex;">
<div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; margin-left: 10%; text-align: center; line-height: 2.5;">
Page 1
</div>
<div style="width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 2</div>
<div style="width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 3</div>
</ons-row>
<hr/>
<div class="outer">
<div class="row" style="text-align: center;">
Page 1 Content
</div>
</div>
<br>
</div>
<div id="hidethis2" style="display:none">
<hr/>
<ons-row style="display: flex;">
<div style="border: 3px solid #666666; border-radius: 7px; background-color: #666666; width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">
Page 1
</div>
<div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; margin-left: 10%; text-align: center; line-height: 2.5;">Page 2</div>
<div style="width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 3</div>
</ons-row>
<hr/>
<div class="outer">
<div class="row" style="text-align: center;">
Page 2 Content
</div>
</div>
<br>
</div>
<div id="hidethis3" style="display:none">
<hr/>
<ons-row style="display: flex;">
<div style="border: 3px solid #6F08F2; border-radius: 7px; background-color: #6F08F2; width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">
Page 1
</div>
<div style="border: 3px solid #6F08F2; border-radius: 7px; background-color: #6F08F2; width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 2</div>
<div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; background-color: #C10000; margin-left: 10%; text-align: center; line-height: 2.5;">Page 3</div>
</ons-row>
<hr/>
<div class="outer">
<div class="row" style="text-align: center;">
Page 3 Content
</div>
</div>
<br>
</div>
<input type="button" onclick="showHide('hidethis')" value="First Page" />
<input type="button" onclick="showHide('hidethis2')" value="Second Page">
<input type="button" onclick="showHide('hidethis3')" value="Third Page">
</body>
</html>
First I would add a class on each Page like:
HTML
<div id="hidethis" class="hidden-div">...</div>
<div id="hidethis2" class="hidden-div">...</div>
<div id="hidethis3" class="hidden-div">...</div>
Then in your JS hide first all elements with class hidden-div and then make the div with the right ID appear again:
JS
function showHide(divId) {
$('.hidden-div').each( function() {
$(this).hide();
});
$("#"+divId).show();
}
Here is a Fiddle. (Perhaps you have to change the HTML-Markup a little bit).
If you want to show the Page with the ID hidethis by default add this CSS Code:
#hidethis {
display: block;
}
This works because ID Selectors are higher rated by CSS than Class Selectors.
For more information about Selectors read this article.
EDIT:
According to your comments I think you are looking for something like this.
HTML
Insert a new div where a line should be shown and remove the margin-left: 10% property on the following div's CSS.
<div class="line"></div>
<div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; text-align: center; line-height: 2.5;">Page 2</div>
CSS
Set width: 10% because of previous margin-left: 10%. Feel free to play with the other values.
.line {
width: 10%;
height: 2px;
background: green;
margin-top: 25px;
}