I'm having trouble trying to vertically center a button in a the body of a panel. I have tried a bunch of css suggestions on stack overflow and the button will still not move. I want the button to be centered next to the image.
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="panel panel-primary">
<div class="panel-heading">
<p>Panel Heading</p>
</div>
<div class="panel panel-body">
<div class="col-lg-2 button">
<button id="fix_button" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-triangle-top"> Fix</span> </button>
</div>
<div class="col-lg-offset-3"> <img src="users/1479318868.jpg" class="img-responsive" width="300px"> </div>
</div>
</div>
</div>
</div>
</div>
try
.panel-body { display: flex; align-items: center; }
You can try CSS Flexbox. Make your .panel-body a flex container use flex's center properties.
Have a look at the snippet below:
.panel-body {
display: flex;
justify-content: center; /* Horizontally centers the content */
align-items: center; /* Vertically centers the content */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="panel panel-primary">
<div class="panel-heading">
<p>Panel Heading</p>
</div>
<div class="panel panel-body">
<div class="col-lg-2 button">
<button id="fix_button" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-triangle-top"> Fix</span>
</button>
</div>
<div class="">
<img src="http://placehold.it/300x300" class="img-responsive" width="300px">
</div>
</div>
</div>
</div>
</div>
</div>
Hope this helps!
Try it:-
button{
height:20px;
width:100px;
margin: -20px -50px;
position:relative;
top:50%;
left:50%;
}
for just horizontal alignment use either
button{
margin: 0 auto;
}
or
div{
text-align:center;
}
Related
I'm trying to center a col-span-6 div to the center of the page using Twitter Bootstrap 3. Unfortunately, nothing I do is working. I used Firefox developer tools to discern the issue was most likely stemming from the fact that the col-span-6 class was floated left. Therefore, I added a style="float: none !important;" to the col-span-6 element, but that did nothing.
Help!!
<div class="panel-group col-sm-6" style="float: none;">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="card-title">test</h5>
</div>
<div class="panel-body">
<p class="card-text">test</p>
</div>
</div>
</div>
I'm not sure but it seems to me that you wanted to achieve this effect:
.super-center {
margin: 0 auto !important;
float: none !important;
}
<!-- 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">
<div class="super-center panel-group col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="card-title">test</h5>
</div>
<div class="panel-body">
<p class="card-text">test</p>
</div>
</div>
</div>
It was enough to add to your div's: margin: 0 auto;
You can align a div to center of the page using the CSS. Following CSS works for me. You can try using this CSS.
.col-sm-6 {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 3px;
text-align: center;
}
<div class="panel-group col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="card-title">test</h5>
</div>
<div class="panel-body">
<p class="card-text">test</p>
</div>
</div>
</div>
You can use display: flex for this to handle alignment in a easier way. I have done a sample code below. Hope it helps you
HTML
<div class="panel-group col-sm-6">
<div class="panel panel-default d-flex h-100">
<div class="panel-heading">
<h5 class="card-title">test</h5>
</div>
<div class="panel-body">
<p class="card-text">test</p>
</div>
</div>
</div>
CSS
.d-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center
}
.h-100 {
height: 100vh !important;
}
JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/bhgx3yzv/
Use column offset with "col-sm-6" to make it in center. Here is an example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-group col-sm-6 col-sm-offset-3">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="card-title">test</h5>
</div>
<div class="panel-body">
<p class="card-text">test</p>
</div>
</div>
</div>
It automatically push the column in center.
Here I am trying to draw a horizontal line between the buttons. I have tried in many ways but I can't get it. I think I need to do some magics in CSS but I am new to HTML and CSS That's why I can't find the way to make it work.
I want:
I got this:
.divided {
display: flex;
align-items: center;
}
.divider {
flex-grow: 1;
border-bottom: 1px solid black;
margin: 5px
}
<div class="col-sm-9" style="padding-left:0px;padding-right:0px">
<div class="col-sm-12 row">
<div class="container" style="padding-left:0px;padding-right:0px">
<div class="row divided">
<div class="col-sm-3">
<button mat-mini-fab>1</button>
<span style="padding-left:15px">Login</span>
</div>
<span class="divider"></span>
<div class="col-sm-3">
<button mat-mini-fab>2</button>
<span style="padding-left:15px">Address</span>
</div>
<span class="divider"></span>
<div class="col-sm-3">
<button mat-mini-fab>3</button>
<span style="padding-left:15px">Mycart</span>
</div>
<span class="divider"></span>
<div class="col-sm-3">
<button mat-mini-fab>4</button>
<span style="padding-left:15px">Payment</span>
</div>
</div>
</div>
</div>
</div>
Can anyone help me to solve this ?
Update:
Use pseudo :after to <div class="col-sm-3 divder">
Instead using <span class="divider"></span> (-- remove it)
.divder:after{
content: '';
width: 71px;
height: 2px;
top: 15px;
background: black;
position: absolute;
right: -12px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-9" style="padding-left:0px;padding-right:0px">
<div class="col-sm-12 row">
<div class="container" style="padding-left:0px;padding-right:0px">
<div class="row divided">
<div class="col-sm-3 divder">
<button mat-mini-fab>1</button>
<span style="padding-left:15px">Login</span>
</div>
<div class="col-sm-3 divder">
<button mat-mini-fab>2</button>
<span style="padding-left:15px">Address</span>
</div>
<div class="col-sm-3 divder">
<button mat-mini-fab>3</button>
<span style="padding-left:15px">Mycart</span>
</div>
<div class="col-sm-3">
<button mat-mini-fab>4</button>
<span style="padding-left:15px">Payment</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I think you're trying to do the same as you would do when using a stepper
https://material.angular.io/components/stepper/overview
Using import {MatStepperModule} from '#angular/material/stepper';
and the correct elements will do the trick
You can use :after psuedo class
.divider:after {
height:1px;
width:40px;
content:'';
background: red;
position:absolute;
right:0px;
top:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="col-sm-12" style="padding-left:0px;padding-right:0px">
<div class="col-sm-12 row">
<div class="container" style="padding-left:0px;padding-right:0px">
<div class="row divided">
<div class="col-sm-3">
<button mat-mini-fab>1</button>
<span style="padding-left:0px">Login</span>
<span class="divider"></span>
</div>
<div class="col-sm-3">
<button mat-mini-fab>2</button>
<span style="padding-left:0px">Address</span>
<span class="divider"></span>
</div>
<div class="col-sm-3">
<button mat-mini-fab>3</button>
<span style="padding-left:0px">Mycart</span>
<span class="divider"></span>
</div>
<div class="col-sm-3">
<button mat-mini-fab>4</button>
<span style="padding-left:0px">Payment</span>
</div>
</div>
</div>
</div>
</div>
Following code adds equally sized lines between menu items as long there is enough space.
/* all direct children of menu and item are laid out in a single row as long as there is enough space */
.menu,
.item {
display: flex;
flex-flow: row wrap;
}
/* all menu items can grow except the last one */
.item:not(:last-child) {
flex-grow: 1;
}
/* a horizontal line is appended to all items if space is available (except the last item) */
.item:not(:last-child):after {
content: '';
border-bottom: 1px solid #000;
height: 50%; /* centers line vertically */
flex-grow: 1;
margin-right: 10px;
}
/* not relevant for menu (typography and resets) */
button,
span {
font-family: Times;
font-size: 16px;
padding: 0;
border: 0;
margin-right: 10px;
}
/* not relevant for menu (rounded buttons) */
button {
background-color: #ddd;
border-radius: 50%;
height: 20px;
width: 20px;
}
<div class="menu">
<div class="item">
<button>1</button>
<span>Login</span>
</div>
<div class="item">
<button>2</button>
<span>Address</span>
</div>
<div class="item">
<button>3</button>
<span>Mycart</span>
</div>
<div class="item">
<button>4</button>
<span>Payment</span>
</div>
</div>
A
If I enclose with a <div> with class="row" and give each button class="span4" the buttons fill the total width of the screen.
I want each button to be only as wide as the text which it contains, with the centers being at 25%, 50% and 75% of the width.
[aaa] [bbb] [ccc]
not
[ aaa ][ bbbb ][ cccc ]
I am new to bootstrap and not a CSS guru.
How do I achieve this?
My buttons also have class="btn-outline btn-default", but that shouldn't affect things (I think) .
By the way, I am currently considering exactly 3 buttons, but if a generic solution for any number is just as easy, that would be welcome.
first of all from your classes it seems you are still using bootstrap-v2, try using bootstrap-v3 (v4 it is still in alpha beta[now] stage), and you can achieve what you want with this:
.row {
border: 1px dashed red /* demo */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row text-center">
<div class="col-xs-4">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="col-xs-4">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="col-xs-4">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
UPDATE (bootstrap-v4)
For those who are using/want to use bootstrap V4, here is how:
.row {
border: 1px dashed red /* demo */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row text-center">
<div class="col-4">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
Try to use a div with class="row" and 3 div with the class="span4 text-center" and put a button in each of these
The bootstrap way would be
.col-md-3 {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
</div>
</div>
or to do it using plain CSS and flexbox
.row {
display: flex;
}
.col-md-4 {
flex-grow: 1;
text-align: center;
}
<div class="container">
<div class="row">
<div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
</div>
</div>
I'm using bootstrap and I'm trying to align the stuff inside my row. I realize that I haven't used up all the column space, and that's fine. I just want the stuff centered.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<style>
#headings {
text-align: center;
}
#row-container {
text-align: center;
}
#take-from-break, #take-from-session {
float: right;
}
</style>
<html>
<div class="container-fluid">
<div class="container">
<div id="headings">
<h1>Pomodoro Clock</h1>
<h3>A Pomodoro Clock helps you break down work into intervals, separated by short breaks.</h3>
</div>
<div id="setup">
<div id="row-container">
Enter time in minutes
<div class="row">
<div class="col-md-1"><button id="take-from-break">-</button></div>
<div class="col-md-2"><input type="number" placeholder="Break Length"></div>
<div class="col-md-1"><button id="add-to-break">+</button></div>
<div class="col-md-2"></div> <!-- blank space -->
<div class="col-md-1"><button id="take-from-session">-</button></div>
<div class="col-md-2"><input type="number" placeholder="Session Length"></div>
<div class="col-md-1"><button id="add-to-session">+</button></div>
</div>
</div>
</div>
<div id="clock-holder">
<button id="clock"></button>
</div>
</div>
</div>
</html>
Here is the JSFiddle: https://jsfiddle.net/c8wLxkob/
And here is the image of the page that I get:
Since it doesn't look like you're using Bootstrap to size your columns in particular, one way to center-align your boxes is to use display: flex along with justify-content: center. I've retained the Bootstrap sizing in the spacer, so the result is still responsive.
Screenshot of result:
Here is a demo to show what I mean:
#headings {
text-align: center;
}
#row-container {
text-align: center;
}
.wrap {
display: flex;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="container">
<div id="headings">
<h1>Pomodoro Clock</h1>
<h3>A Pomodoro Clock helps you break down work into intervals, separated by short breaks.</h3>
</div>
<div id="setup">
<div id="row-container">
Enter time in minutes
<div class="wrap">
<div class="center-wrap">
<button id="take-from-break">-</button>
<input type="number" placeholder="Break Length">
<button id="add-to-break">+</button>
</div>
<div class="col-md-2"></div>
<div class="center-wrap">
<button id="take-from-session">-</button>
<input type="number" placeholder="Session Length">
<button id="add-to-session">+</button>
</div>
</div>
</div>
</div>
<div id="clock-holder">
<button id="clock"></button>
</div>
</div>
</div>
JSFiddle Version: https://jsfiddle.net/re8jzxer/
I know this may be easy for most of you but I'm stuck with this issue.
I need to implement this design:
Layout Design
... and for now I've got this Current layout.The general structure is a row with col-3 and col-9, this col-9 has two rows, one for name and job title, and the other one for statistics in the page (col-3 for each of them). I need them to fill the height of his parent, but height property doesn't work. Which could be a clean solution? Thanks a lot.
Here is the structure, it's pretty simple tho.
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img ...>
<span>..</span>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">...</h2>
<h4 class="text-muted">...</h4>
</div>
</div>
<div class="row text-center">
<div class="col-md-3 stat">
<h3>...</h3>
<small>...</small>
</div>
...
</div>
</div>
Use position: relative on the parent and then position:absolute; bottom: 0; on the children.
Nice explanation there.
Flexbox would be my recommendation although CSS tables might be an option too.
Codepen Demo
Snippet Demo (view Fullscreen)
.user-image {
background: pink;
}
.user-image img {
display: block;
margin: auto;
}
.profile-header {
display: flex;
}
.right {
background: #c0ffee;
display: flex;
flex-direction: column;
}
.stats {
margin-top: auto;
}
.stat {
background: lightgrey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img src="http://www.fillmurray.com/300/200" alt="" />
<span>User Ranking</span>
</div>
<div class="col-md-9 right">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">User Name</h2>
<h4 class="text-muted">reference</h4>
</div>
</div>
<div class="row text-center stats">
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
</div>
</div>