How to center a button and make it smaller than shown in the image?
HTML:
Download CV
CSS-
.cv {
position: relative;
background: #080808;
display: inline-block;
color: #fff;
padding: 10px 30px;
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
font-weight: 500;
text-align: center;
width: 100%;
margin-bottom: 30px;
}
Here you Go
.cv {
position: relative;
background: #080808;
display: inline-block;
color: #fff;
padding: 10px 30px;
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
font-weight: 500;
text-align: center;
width: 30%;
margin-bottom: 30px;
}
div{
display: flex;
justify-content: center;
align-items: center;
}
<div>
Download CV
</div>
change the display property to flex and add a new property called justify-content with the value of center. This should work
Related
This is another "how do I vertically center" question in HTML. This one is when using the :before modifier.
HTML
<div style="border: 1px solid blue">
<div class="status-yellow">vertically center me</div>
</div>
CSS
.status-yellow {
display: inline-block;
padding: .35em .65em;
font-size: .75em;
font-weight: 400;
line-height: 1;
color: #000;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
text-transform: uppercase;
background-color: #fff;
}
.status-yellow:before {
display: inline-block;
content:"\2022";
margin-right: 0.5rem;
color: yellow;
font-size: 48px;
}
Here's a CodePen showing the issue
I have a div tag and I'm using the :before modifier to inject a bullet before the text. When the bullet increases in size, the vertical centering doesn't work. When the bullet is tiny (too tiny) it's all centered. I'm missing something. What am I missing?
You can use flexbox.
.status-yellow {
display: inline-block;
padding: .35em .65em;
font-size: .75em;
font-weight: 400;
line-height: 1;
color: #000;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
text-transform: uppercase;
background-color: #fff;
display:flex;
align-items:center;/*for vertical align*/
justify-content:center;/*for horizontal align*/
}
.status-yellow:before {
display: inline-block;
content:"\2022";
margin-right: 0.5rem;
color: yellow;
font-size: 48px;
}
I want to add a border in the button before the icon
what I m using is that
my code is this
.button {
background-color: #4CAF50;
border: none;
color: white;
Width: 660px;
Height:55px;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
background: #333333;
position: absolute;
left: 16.76%;
right: 16.68%;
top: 27.29%;
bottom: 30.89%;
font-family: DIN Pro;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 23px;
text-align: center;
text-transform: uppercase;
color: #F6F6F6;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
Contact<span style="border:solid 1px white"><i class="fa fa-home;"></span></i>
</body>
</html>
but it is not setting up like that. I want to set it up like the same is in the picture
Here is the code you need for the button. To answer your question about the border on the icon, I added a pseudo element (:after) to the button which contains the arrow icon. Then it was just a matter of applying border-left to it.
/* button styles */
.button {
background-color: slategray;
font-family: sans-serif;
border: none;
outline: none;
min-height: 42px;
min-width: 180px;
max-width: 100%;
font-weight: bold;
text-decoration: none;
cursor: pointer;
font-size: 18px;
text-align: center;
text-transform: uppercase;
color: #F6F6F6;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 8px 52px 8px 10px;
position: relative;
}
.button:after {
content: "\f061";
display: flex;
position: absolute;
font-family: "Font Awesome 5 Free", sans-serif;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
width: 42px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-left: 1px solid #8192a2;
}
.button:hover {
background-color: #8192a2;
}
.button:hover:after {
border-left-color: #95a7b8;
}
/* example styles */
body,
html {
padding: 0;
margin: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: coral;
}
* {
box-sizing: border-box;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
Contact
So I have a button, but here's the issue. On Firefox only does it not completely fill up. As seen here
This is what it should look like
I'm not really sure what to do. Here's the CSS
.button-panel .button {
-webkit-appearance: none;
border: none;
cursor: pointer;
height: 55px;
font-size: 27px;
letter-spacing: 0.05em;
text-align: center;
width: 100%;
font-family: 'Avenir Next';
display: inline-block;
font-weight: 300;
background-color: #6699FF;
outline: 3px solid #6699FF;
line-height: 59px;
}
And a demo http://jsfiddle.net/h7PXe/
Reason why it showing up is that you use line-height bigger than height of element.
Here you can see how box model is woking and were are outlines:
http://i.stack.imgur.com/Q6J6n.png
You can achieve the same look without using basic properties (then it will work in every browser)
.button-panel .button {
display: inline-block;
padding: 7px 0 5px;
border: 3px solid #6699FF;
width: 100%;
font-family: 'Avenir Next';
font-size: 27px;
font-weight: 300;
letter-spacing: 0.05em;
text-align: center;
background-color: #6699FF;
cursor: pointer;
}
http://jsfiddle.net/h7PXe/1/
Do height: 100%. You need to do this or else the browser won't know what to set the height to.
.button-panel .button {
-webkit-appearance: none;
border: none;
cursor: pointer;
height: 55px;
font-size: 27px;
letter-spacing: 0.05em;
text-align: center;
width: 100%;
font-family: 'Avenir Next';
display: inline-block;
font-weight: 300;
background-color: #6699FF;
outline: 3px solid #6699FF;
line-height: 59px;
height: 100%
}
And a demo.
I have made some buttons to link people from my site to social media pages and the text in the Google Plus one is too low and I would like it to go higher in the div but I am struggling to do this, my code is here on JS fiddle.
The buttons aren't complete yet, I just want to know how to get the text higher, cheers
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: central;
}
a:hover .GooglePlus {
background-color: #FE2E2E;
color: white;
}
Just add line-height:27px; to adjust g+
Code full class:
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: middle;
line-height:27px;
}
If i understand you correctly you are just trying to move the text inside of those circle backgrounds higher.
If this is the case you can cheat it with line height as done in this fiddle
http://jsfiddle.net/9dj9u/2/
Which leaves the resulting CSS affected.
.FaceBook {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Calibri;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
line-height:1.1;
}
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: middle;
line-height:0.8;
}
Just adjust line-height in percentage values: line-height: 50%, keep increasing or decreasing till you get there, you might also want to adjust padding, and box-sizing... and remove vertical-align
Remember, this isn't quite exact science, because you do not intend the g and the f to stand next to each other like they do in a sentence, watch this: fg, notice how the g normally is indeed lower than the f.
i included the correct vertical-align value and adjusted the height and width
.FaceBook {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 5px;
font-family: Calibri;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
}
a:hover .FaceBook {
background-color: #4c66a4;
color: white;
}
#footer .FaceBook {
display: inline-block;
}
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;*/
border-bottom: 2px solid black;
padding: 2px;
font-family: garamond;
font-weight: bold;
height: 50px;
width: 50px;
background-color: #D8D8D8;
text-align:center ;
vertical-align: text-bottom;
padding: 0px;
}
a:hover .GooglePlus {
background-color: #FE2E2E;
color: white;
}
#footer .GooglePlus {
display: inline-block;
}
#plus {
font-size: 20px;
padding:0px 0px;
}
a {
text-decoration: none;
}
I'm trying to center this text horizontally and vertically, ideally based on percentages (for responsive-ness). I can't figure out why this isn't working.
Fiddle: http://jsfiddle.net/PTSkR/144/
Code:
<div class="row-fluid card-box">
<div class="span2 card-box-controls-container">
<div class="card-box-controls">
<a >edit</a>
<a >delete</a>
</div>
</div>
</div>
.card-box .card-box-controls-container {
height: 160px;
vertical-align: middle;
display: inline-block;
text-align: center;
color: black;
font-size: 14px !important;
}
.card-box .card-box-controls-container .card-box-controls {
vertical-align: middle;
display: inline-block;
text-align: center;
color: black;
font-size: 14px;
}
.card-box .card-box-controls a {
cursor: pointer !important;
color: gray;
text-decoration: none;
margin: 0;
vertical-align: middle;
font-size: 14px;
}
.card-box {
background-color: #f5f5f5;
color: black;
margin-right: 0px;
margin-bottom: 15px;
margin-top: 15px;
padding: 5px 0 5px 0;
}
You can use display:table, for example:
.card-box .card-box-controls-container {
height: 160px;
vertical-align: middle;
display:table;
text-align: center;
color: black;
font-size: 14px !important;
width: 100%;
}
.card-box .card-box-controls-container .card-box-controls {
vertical-align: middle;
display: table-cell;
text-align: center;
color: black;
font-size: 14px;
}
.card-box .card-box-controls a {
cursor: pointer !important;
color: gray;
text-decoration: none;
margin: 0;
vertical-align: middle;
font-size: 14px;
}
.card-box {
background-color: #f5f5f5;
color: black;
margin-right: 0px;
margin-bottom: 15px;
margin-top: 15px;
padding: 5px 0 5px 0;
}
pls view the demo. and you can use display:inline-block, for example:
.card-box .card-box-controls-container {
height: 160px;
text-align: center;
color: black;
font-size: 14px !important;
}
.card-box .card-box-controls-container:after{
content:"";
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0px;
background: red;
}
.card-box .card-box-controls-container .card-box-controls {
vertical-align: middle;
display: inline-block;
text-align: center;
color: black;
font-size: 14px;
position: relative;
}
.card-box .card-box-controls a {
cursor: pointer !important;
color: gray;
text-decoration: none;
margin: 0;
vertical-align: middle;
font-size: 14px;
}
.card-box {
background-color: #f5f5f5;
color: black;
margin-right: 0px;
margin-bottom: 15px;
margin-top: 15px;
padding: 5px 0 5px 0;
}
pls view the demo.
There are other ways, pls click here and here.
You can use line-height: 160px on .card-box .card-box-controls-container if you want to center only one line.
http://jsfiddle.net/PTSkR/146/
There's no easy way to vertically align content in html or css more info #
http://blog.themeforest.net/tutorials/vertical-centering-with-css/