Having tried the solutions suggested in the other posts, I'm left to post my novice code in which the embedded image simply will not centre and I haven't a clue why. The image should appear in the middle of a login screen/box; it did for the guy who did the demo, yet I've had to alter his CSS to make it marginally better. Still, the image will not centre. Does anyone have any insight?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Standard Meta Tags -->
<!-- Bootstrap & Related Links-->
<link rel="stylesheet" href="static/styles.css">
<title>Project</title>
</head>
<body>
<!-- cont is the entire box; changing its CSS changes its position on the page -->
<div class="cont">
<!-- box is the area that contains the image, username, and pass fields, but not the button bar and login buttons -->
<div class="box">
<!-- Creates the entire top row with close button and three circular buttons
<div class="row top">
<div class="left">
<i class="fa fa-times close"></i>
</div>
<div class="right">
<i class=" fa fa-circle but one"></i>
<i class=" fa fa-circle but two"></i>
<i class=" fa fa-circle but three"></i>
</div>
</div>
-->
<div class="row middle sg">
<div class="row pic sg">
<div class="col-md-4 col-md-offset-4">
<img src="static/fleur.jpeg" alt="fleur-de-lis" class="photo">
</div>
</div>
<form action="#" class="form-horizontal form">
<div class="input-group y">
<span class="input-group-addon"><i class="fa fa-user use"></i></span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa faunlock-alt use"></i></span>
<input type="password" class="form-control" placeholder="Password">
</div>
</form>
</div>
<div class="row base sg">
<h2 class="text-center login">Login</h2>
</div>
</div>
</div>
</body>
</html>
CSS
html, body {
width: 100%;
height: 100%;
}
.cont {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.box {
background-color: #2B2B35;
width: 400px;
border-radius: 10px;
}
.top {
width: 100%;
background-color: #24242E;
margin: 0;
border-radius: 10px 10px 0 0;
padding: 0 15px;
}
.left {
float: left;
}
.right {
float: right;
}
.close {
padding: 18px 0;
font-size: 20px;
color: #fff;
}
.but {
padding: 18px 0 18px 5px;
font-size: 20px;
}
.but:hover {
cursor: pointer;
}
.one {
color: #F4CB61;
}
.two {
color: #DB5594;
}
.three {
color: #6451E8;
}
.photo {
width: 200px;
border-radius: 50%;
}
.sg {
display: block;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: center;
}
.pic {
margin: 40px 0 30px 0;
}
.form {
padding: 0 40px 40px 40px;
}
.login {
padding: 12px 0;
margin: 0;
}
.base {
background-color: #3FA752;
border-radius: 0 0 10px 10px;
color: #fff;
}
.base:hover {
cursor: pointer;
}
.base h2{
font-weight: 600;
font-size: 26px;
}
.user {
color: #ccc;
}
.y {
padding-bottom: 15px;
}
input[type=text],
input[type=password] {
background: 0, 0;
border: 0;
box-shadow: none;
border-radius: 0;
border-bottom: 1px solid #9446B6;
}
.input-group-addon {
background: 0 0;
border: 0;
border-radius: 0;
border-bottom: 1px solid #9AA6B6;
}
.use {
color: #9AA6B6;
}
input[type=text],
input[type=password]:focus{
box-shadow: none !important;
color: #FF3F3F;
}
Updated:
Removing these classes class="col-md-4 col-md-offset-4" and adding a class to center the image fixes the problem.
html, body {
width: 100%;
height: 100%;
}
.cont {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.box {
background-color: #2B2B35;
width: 400px;
border-radius: 10px;
}
.top {
width: 100%;
background-color: #24242E;
margin: 0;
border-radius: 10px 10px 0 0;
padding: 0 15px;
}
.left {
float: left;
}
.right {
float: right;
}
.close {
padding: 18px 0;
font-size: 20px;
color: #fff;
}
.but {
padding: 18px 0 18px 5px;
font-size: 20px;
}
.but:hover {
cursor: pointer;
}
.one {
color: #F4CB61;
}
.two {
color: #DB5594;
}
.three {
color: #6451E8;
}
.text-center {
text-align: center;
}
.photo {
width: 200px;
border-radius: 50%;
}
.sg {
display: block;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: center;
}
.pic {
margin: 40px 0 30px 0;
}
.form {
padding: 0 40px 40px 40px;
}
.login {
padding: 12px 0;
margin: 0;
}
.base {
background-color: #3FA752;
border-radius: 0 0 10px 10px;
color: #fff;
}
.base:hover {
cursor: pointer;
}
.base h2{
font-weight: 600;
font-size: 26px;
}
.user {
color: #ccc;
}
.y {
padding-bottom: 15px;
}
input[type=text],
input[type=password] {
background: 0, 0;
border: 0;
box-shadow: none;
border-radius: 0;
border-bottom: 1px solid #9446B6;
}
.input-group-addon {
background: 0 0;
border: 0;
border-radius: 0;
border-bottom: 1px solid #9AA6B6;
}
.use {
color: #9AA6B6;
}
input[type=text],
input[type=password]:focus{
box-shadow: none !important;
color: #FF3F3F;
}
<html lang="en">
<head>
<!-- Standard Meta Tags -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Bootstrap & Related Links-->
<link rel="stylesheet" href="static/styles.css">
<title>Project</title>
</head>
<body>
<!-- cont is the entire box; changing its CSS changes its position on the page -->
<div class="cont">
<!-- box is the area that contains the image, username, and pass fields, but not the button bar and login buttons -->
<div class="box">
<!-- Creates the entire top row with close button and three circular buttons
<div class="row top">
<div class="left">
<i class="fa fa-times close"></i>
</div>
<div class="right">
<i class=" fa fa-circle but one"></i>
<i class=" fa fa-circle but two"></i>
<i class=" fa fa-circle but three"></i>
</div>
</div>
-->
<div class="row middle sg">
<div class="row pic sg">
<div class="text-center">
<img src="https://placeimg.com/200/200/nature" alt="fleur-de-lis" class="photo">
</div>
</div>
<form action="#" class="form-horizontal form">
<div class="input-group y">
<span class="input-group-addon"><i class="fa fa-user use"></i></span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa faunlock-alt use"></i></span>
<input type="password" class="form-control" placeholder="Password">
</div>
</form>
</div>
<div class="row base sg">
<h2 class="text-center login">Login</h2>
</div>
</div>
</div>
</body>
</html>
By default images are inline-block elements, they follow the regular flow and should be centered with text-align (set in the parent).
Images can be set to display as block elements, to center these the value of width must be set (amount, percent,...), and both left and right margins set to auto.
.container {
width: 100%;
}
.tex-center {
text-align: center;
}
#inline-example {
display: inline-block; /* Default value*/
}
#block-example {
display: block;
max-width: 200px;
margin: 0 auto 0 auto;
}
<h3>Inline centered image</h3>
<div class="container tex-center"><img id="inline-example" src="https://placeimg.com/200/200/nature"></div>
<h3>Block centered image</h3>
<div class="container"><img id="block-example" src="https://placeimg.com/200/200/people"></div>
How to find out similar CSS issues. Using Chrome's devtools (or similar) we can see there's a margin in the left pushing the image. col-md-4 col-md-offset-4 are both Bootsrap classes used for a grid setup, trying and removing them gives us the solution.
Try this:
.photo {
width: 200px;
border-radius: 50%;
display: block;
margin: auto;
}
To center an image in a div, you should normally set the display to block and margin to auto on the img.
If you are talking about this image <img src="static/fleur.jpeg" alt="fleur-de-lis" class="photo"> then you should add to your 'photo' class:
display:block;
margin: 0 auto;
Make sure other CSS wont prevent those lines to work and your image should centre itself within your col-element.
Your image is in column with offset, remove column classes (event whole div) and all will work well with:
.photo {
display: block; // defining element as block
margin: 0 auto; // and auto side margin
width: 200px;
border-radius: 50%;
}
Example:
https://codepen.io/themeler/pen/QqNpWv
Related
I am making a sidebar and am new to css. I created a div which represents a closed sidebar. It is supposed to only show the icons. Unfortunately the icons come in a misaligned manner inside the div based on their size. How do I fix this?
.sidenav {
height: 492px;
width: 300px;
background-color: #db3d44;
}
.data-icon {
font-size: 45px;
color: black;
opacity: 0.5;
float: left;
margin-left: 9px;
margin-top: 5px;
margin-bottom: 10px;
}
.hamburger {
background-color: transparent;
border-color: transparent;
color: white;
margin-left: 10px;
margin-top: 4px;
font-size: 25px;
}
.hamburger:hover {
color: black;
}
.sidenav-closed {
width: 65px;
float: left;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="sidenav-closed sidenav">
<button class="hamburger data-disappear">☰</button>
<div class="icons-only">
<div class="data-icon">
<i class="fa fa-home"></i>
</div>
<div class="data-icon">
<i class="fa fa-car"></i>
</div>
<div class="data-icon">
<i class="fa fa-home"></i>
</div>
</div>
</div>
The car icon is misaligned here. What's the solution?
You could try to align all the icons to the center so your .data-icon class could look like this:
.data-icon {
font-size: 45px;
color: black;
opacity: 0.5;
display: block;
width: 100%;
text-align: center;
}
Your div elements doesn't have set width and height in CSS - so the icons are strictly aligned inside them.
If you want to vertically center them and learn something new use flexbox:
.icons-only {
display: flex;
flex-direction: column;
align-items: center;
}
and
.data-icon {
...
margin-left:0
}
Your car icon is also a little bit bigger than house - you can a little change it size by add new class to it or use this:
.data-icon:nth-child(2) {
font-size: 40px;
}
This CSS code will take second (=2) element with class .data-icon and set different font size for it
The icons are inline elements so they will be left aligned by default. Add in that the icons are not that same size (this is normal), you get an uneven alignment.
To remedy this, add text-align: center to .icons-only.
Note: Given the layout in the example, it does not appear necessary to float .data-icon to the left.
.sidenav {
height: 492px;
width: 300px;
background-color: #db3d44;
}
.icons-only {
text-align: center;
}
.data-icon {
color: rgba( 0, 0, 0, 0.5 );
font-size: 45px;
}
.hamburger {
background-color: transparent;
border-color: transparent;
color: white;
margin-left: 10px;
margin-top: 4px;
font-size: 25px;
}
.hamburger:hover {
color: black;
}
.sidenav-closed {
width: 65px;
float: left;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="sidenav-closed sidenav">
<button class="hamburger data-disappear">☰</button>
<div class="icons-only">
<div class="data-icon">
<i class="fa fa-home"></i>
</div>
<div class="data-icon">
<i class="fa fa-car"></i>
</div>
<div class="data-icon">
<i class="fa fa-home"></i>
</div>
</div>
</div>
Trying to position my image without changing the position. When the wind text is turned off(js not working in codepen btw. ) ie not displayed under the temperature, the weatherimage is moving up. I tried to position this 'absolute' but not helping.
I am using reactjs to display the Widget on the right:
<div className="widget">
<div className="row">
<div className="col-lg-12 title">{title}</div>
</div>
<div className="row widgettop">
<div className="col-lg-6 topicon">
<img src={'http://openweathermap.org/img/w/' + icon + '.png'}></img>
</div>
<div className="col-lg-6 topdegrees">
{location}
<div className='degrees'>{degrees}°</div>
{wind && <div>Wind{' '}<span className='wind'>{speed}</span> {unitsType === 'metric' ? <span>km/h</span> : <span>mph</span>}</div>}
</div>
</div>
</div>
Based on the state.wind I display the wind details or not.
How can I keep the image in position when the Wind text/ other content is removed/changed?
codepen here
You can toggle the visibility property for the wind area using JS. The image holds its place when I added visibility: hidden to say #windArea - you can toggle between visible and hidden:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-family: Lucida Grande;
}
input,
label {
display: block;
}
#tempArea input,
#tempArea label {
display: inline;
margin-bottom: 10px;
}
#windArea input,
#windArea label {
display: inline;
margin-bottom: 10px;
}
div#main {
background: #F2F2F2;
padding: 1vw 2vw;
width: 48%;
}
.spaceradio {
margin-right: 10px;
}
img {
width: 84% !important;
height: 100% !important;
margin-left: 20%;
position: relative;
}
.divider {
border-left: 1px solid lightgrey;
}
.widget {
box-shadow: 1px 2px 1px lightgray;
background-color: white;
margin-left: 10px;
height: 100%;
width: 90%;
position: absolute;
}
.title {
margin-left: 30px;
padding: 10px;
position: absolute;
}
.left {
margin-left: 20px;
padding: 10px;
vertical-align: top;
}
.text {
height: 40px;
width: 100%;
}
.top {
margin-top: 15px;
}
.widgettop {
margin-top: 15px;
}
.topdegrees {
margin-top: 40px;
}
.topicon {
margin-top: 20px;
}
.degrees {
font-size: xx-large;
font-weight: bold;
}
.wind {
font-size: small;
font-weight: bold;
}
.hline {
border-top: 4px solid blue;
padding: 0 !important;
margin-bottom: 10px;
width: 48%;
}
/* .abs
{
position: absolute;
} */
#windArea { /* ADDED */
visibility: hidden;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="left">
<hr class="container hline">
<div id="main" class="container border">
<div class="row">
<div class="col-lg-6 top"><label for="title">Title</label><input id="title" type="text" placeholder=" Title of widget" name="title" class="text" value="">
<div class="top"><label for="radio">Temperature</label>
<div id="tempArea" class="row"><span class="col-lg-6"><input type="radio" id="one" class="spaceradio" value="metric" checked=""><label for="one">℃</label></span><span class="col-lg-6"><input type="radio" id="two" class="spaceradio" value="imperial"><label for="two">℉</label></span></div>
</div>
<div class="top"><label for="radio">Wind</label>
<div id="windArea" class="row"><span class="col-lg-6"><input type="radio" id="one" class="spaceradio" value="true"><label for="one">On</label></span><span class="col-lg-6"><input type="radio" id="two" class="spaceradio" value="false" checked=""><label for="two">Off</label></span></div>
</div>
</div>
<div class="col-lg-6 divider top">
<div class="widget">
<div class="row">
<div class="col-lg-12 title">FDSFSDFDSFDSFDS</div>
</div>
<div class="row widgettop">
<div class="col-lg-6 topicon"><img src="http://openweathermap.org/img/w/09d.png"></div>
<div class="col-lg-6 topdegrees abs">Paramatta
<div class="degrees">58.12°</div>
<div>Wind <span class="wind">23.04</span> <span>mph</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I create card using display: table layouting. This is my attempt so far:
.panel-bg {
background-color: #F8F8F8;
height: 100%;
width: 100%;
margin: 0;
padding: 24px 0;
}
.panel {
width: calc(100%-32px);
height: 100%;
border-radius: 3px;
background-color: #fff;
box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
font-size: 16px;
cursor: pointer;
margin: 0 16px;
}
.panel-title-row {
display: table-row;
width: 100%;
border-collapse: collapse;
border-bottom: solid 1px #c4c4c4;
}
.panel-title {
display: table-cell;
width: 80%;
text-transform: uppercase;
font-size: 14px;
font-weight: 700;
color: #0099ff;
padding: 24px;
}
.panel-action {
text-align: right;
width: 20%;
display: table-cell;
}
.panel-action li {
margin-left: 16px;
}
.panel-action li:last-child {
margin-left: 32px;
}
.col-1,
.col-2,
.col-3 {
width: 33.33%;
display: table-cell;
padding: 24px;
}
.panel-data {
margin-top: 16px;
}
.panel-data-label {
font-weight: 700;
font-size: 12px;
}
.panel-data-value {
font-size: 13px;
margin-top: 8px;
}
.panel-content {
display: table-row;
width: 100%;
}
.panel-data-vertical {
display: table;
width: 100%;
}
.panel-data-vertical .panel-data-label,
.panel-data-vertical .panel-data-value {
display: table-cell;
width: 50%;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<div class="panel-bg">
<div class="panel">
<div class="panel-title-row">
<div class="panel-title">
Members
</div>
<ul class="panel-action">
<li><i class="fas fa-pencil-alt"></i></li>
<li><i class="fas fa-trash"></i></li>
<li><i class="fas fa-chevron-down"></i></li>
</ul>
</div>
<div class="panel-content">
<div class="col-1">
<div class="panel-data panel-data-horizontal">
<div class="panel-data-label">
Effective Date
</div>
<div class="panel-data-value">
1 Jan 2018
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Employment Type
</div>
<div class="panel-data-value">
Permanent
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Job Level
</div>
<div class="panel-data-value">
Staff
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Job Title
</div>
<div class="panel-data-value">
All
</div>
</div>
</div>
<div class="col-2">
</div>
<div class="col-3">
</div>
</div>
</div>
</div>
My problems are:
I want to put border-bottom to the panel-title-row but it doesn't show. I want to make the border with the padding (about 24 px) to the left and right but whenever i put padding properties or the border-bottom to the row or its children it seems like doesn't work.
panel-title-row 's children doesn't fill their parent's width to 100% eventhough I set 80% and 20% to each child. When I change the percentage, it affect the col-1 that doesn't belong to the row.
I create another table-row below the panel-title (named panel-content) and I want to divide it to 3 columns with the same width (named col-1, col-2, and col-3) but the width: 33.33% doesn't work.
This is what I want to achieve, with emphasis on the space between the card and the line.
Any help appreciated!
Hope this may help you, do you want it to be done only using table?
.panel-bg {
background-color: #F8F8F8;
height: 100%;
width: 100%;
margin: 0;
padding: 24px 0;
}
.panel {
width: calc(100%-32px);
height: 100%;
border-radius: 3px;
background-color: #fff;
box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
font-size: 16px;
cursor: pointer;
margin: 0 16px;
padding:25px;
}
.panel-title-row {
display: block;
width: 100%;
border-collapse: collapse;
border-bottom: solid 1px #c4c4c4;
}
.panel-title {
display: inline-block;
width: 78%;
text-transform: uppercase;
font-size: 14px;
font-weight: 700;
color: #0099ff;
padding: 0;
}
.panel-action {
text-align: right;
width: 20%;
display: inline-block;
padding:0px 5px 15px 0;
margin:0;
}
.panel-action li {
margin-left: 10px;
}
.panel-action li:last-child {
margin-left: 29px;
}
.col-1,
.col-2,
.col-3 {
width: 33.33%;
display: table-cell;
padding: 5px 0px 20px 0px;
}
.panel-data {
margin-top: 16px;
}
.panel-data-label {
font-weight: 700;
font-size: 12px;
}
.panel-data-value {
font-size: 13px;
margin-top: 8px;
}
.panel-content {
display: table-row;
width: 100%;
}
.panel-data-vertical {
display: table;
width: 100%;
}
.panel-data-vertical .panel-data-label,
.panel-data-vertical .panel-data-value {
display: table-cell;
width: 50%;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<div class="panel-bg">
<div class="panel">
<div class="panel-title-row">
<div class="panel-title">
Members
</div>
<ul class="panel-action">
<li><i class="fas fa-pencil-alt"></i></li>
<li><i class="fas fa-trash"></i></li>
<li><i class="fas fa-chevron-down"></i></li>
</ul>
</div>
<div class="panel-content">
<div class="col-1">
<div class="panel-data panel-data-horizontal">
<div class="panel-data-label">
Effective Date
</div>
<div class="panel-data-value">
1 Jan 2018
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Employment Type
</div>
<div class="panel-data-value">
Permanent
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Job Level
</div>
<div class="panel-data-value">
Staff
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Job Title
</div>
<div class="panel-data-value">
All
</div>
</div>
</div>
<div class="col-2">
</div>
<div class="col-3">
</div>
</div>
</div>
</div>
I have to make an <input> that's larger than the usual. The height must be 55px. I am having trouble vertically aligning the glyph image inside the orange square. It looks like this:
It should look like this:
I have tried using margin-top on my <i> element but it moves the rectangle down too, I need to move just the glyph. It looks like this:
Please let me know if you have any ideas on how I could vertically center the glyph inside the orange box. I have setup a jsfiddle at https://jsfiddle.net/vteL375o/1/
HTML:
<div class="container">
<div class="form-group has-feedback" style="margin-top:20px;">
<input type="text" id="search-query" class="form-control not-rounded search-input">
<i class="glyphicon glyphicon-search form-control-feedback glyph-class" style=""></i>
</div>
</div>
CSS:
.not-rounded {
border-radius: 0;
}
.search-input {
font-size: 20px;
margin-bottom: 50px;
height: 55px;
}
.glyph-class {
height: 55px;
width: 55px;
color:white;
background-color: orange;
font-size: 20px;
}
You can use Flexbox for this, or inline-flex in this case.
.not-rounded {
border-radius: 0;
}
input.search-input {
font-size: 20px;
margin-bottom: 50px;
height: 55px;
}
.glyphicon.glyphicon-search.form-control-feedback.glyph-class {
height: 55px;
width: 55px;
color: white;
background-color: orange;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="form-group has-feedback" style="margin-top:20px;">
<input type="text" id="search-query" class="form-control not-rounded search-input">
<i class="glyphicon glyphicon-search form-control-feedback glyph-class" style=""></i>
</div>
</div>
Add line-height: 55px; to .glyph-class.
input.not-rounded {
border-radius: 0;
}
input.search-input {
font-size: 20px;
margin-bottom: 50px;
height: 55px;
}
i.glyph-class {
height: 55px;
width: 55px;
color: white;
background-color: orange;
font-size: 20px;
line-height: 55px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="form-group has-feedback" style="margin-top:20px;">
<input type="text" id="search-query" class="form-control not-rounded search-input">
<i class="glyphicon glyphicon-search form-control-feedback glyph-class" style=""></i>
</div>
</div>
Just add padding: 10px 0; in to your .glyph-class
like this
.glyph-class {
height: 55px;
width: 55px;
color:white;
background-color: orange;
font-size: 20px;
padding: 10px 0;
}
Here is the running sample: https://jsfiddle.net/vteL375o/6/
I want to create a button like this one :
but bigger, resizable and to function properly on bootstrap.
Here's what I've done so far:
I've tried with display: inline-block; on download-btn-icon and download-btn-text then I wanted to center the .fa using http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ but the .fa displays way out of download-btn.
This is the html:
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="download-btn">
<div class="download-btn-icon">
<i class="fa fa-cloud-download fa-3x"></i>
</div>
<div class="download-btn-text">
<h3>Download Client</h3>
<h5>Get the latest full updated client.</h5>
</div>
</div>
</div>
and this is the less:
.download-btn {
width: 100%;
height: 70px;
background-color: #000;
.download-btn-icon {
display: inline-block;
float: left;
width: 25%;
height: 100%;
border-right: 1px solid #fff;
.fa{
padding-top: 14px;
padding-left: 23px;
}
}
.download-btn-text {
display: inline-block;
width: 75%;
float: right;
padding-left: 15px;
}
}
I'm clueless I don't know how to align the divs properly, I need some advice.
You can use display: table-cell and vertical-align: middle to achieve this effect. This solves the alignment issue and forces both elements to have the same height.
h3, h5 {
margin: 0;
line-height: 1.5em;
}
.download-btn-icon,
.download-btn-text {
display: table-cell;
background: #222;
vertical-align: middle;
padding: 7.5px 15px;
color: #999;
}
.download-btn-icon {
border-right: 1px solid #444;
}
<div class="download-btn">
<div class="download-btn-icon">
<i class="fa fa-cloud-download fa-3x"></i>
</div>
<div class="download-btn-text">
<h3>Download Client</h3>
<h5>Get the latest full updated client.</h5>
</div>
</div>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">