I know this has been answered 100 times, but none of the existing solutions seem to work for me.
I want to center an input field horizontally in a div. Why is horizontal centering such a pain?!?!? The parent div may change in size based on screen size, so margin percentages don't work.
HTML
<div class="select" id="avatar">
<h4>Please enter your name.</h4>
<!-- Object i want to center-->
<div class="input-group">
<input type="text" class="form-control text-center" id="playerName">
</div>
<h4>And Select Your Ship</h4>
<img class="avatars" id="ship1" src="images/spaceship1.png">
<img class="avatars" id="ship2" src="images/spaceship2.png">
<img class="avatars" id="ship3" src="images/spaceship3.png">
<img class="avatars" id="ship4" src="images/spaceship4.png">
<button class="btn" id="submitPlayer">Submit</button>
</div>
parents CSS
.select {
background-color: white;
z-index: 200;
padding: 0px 15px 0px 15px;
text-align: center;
font-family: 'Krona One', sans-serif;
border: medium dashed green;
margin-left: 25%;
margin-right: 25%;
}
I also want to center this one, and I assume it will be the same solution, but it has no parent, besides body.
<div class="input-group">
<input class="text-center" type="text" id="word">
</div>
Why not use Bootstrap's center-block class..
<div class="input-group center-block">
<input class="center-block" type="text" id="word">
</div>
http://www.bootply.com/sTboTk5CvU
inputs and button are like img, you can display them as block and use margin:auto; so they stand alone and in the middle without using 100% of the width/space avalaible :
.select {
background-color: white;
z-index: 200;
padding: 0px 15px 0px 15px;
text-align: center;
font-family: 'Krona One', sans-serif;
border: medium dashed green;
margin-left: 25%;
margin-right: 25%;
}
button.btn#submitPlayer {
display: block;
margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="select" id="avatar">
<h4>Please enter your name.</h4>
<!-- Object i want to center-->
<div class="input-group">
<input type="text" class="form-control text-center" id="playerName">
</div>
<h4>And Select Your Ship</h4>
<img class="avatars" id="ship1" src="images/spaceship1.png">
<img class="avatars" id="ship2" src="images/spaceship2.png">
<img class="avatars" id="ship3" src="images/spaceship3.png">
<img class="avatars" id="ship4" src="images/spaceship4.png">
<button class="btn" id="submitPlayer">Submit</button>
</div>
and you may do the same with input :
.input-group,
input#word.text-center{
display: block;
margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
<input class="text-center" type="text" id="word">
</div>
Related
Trying to align an hr to a div below it. This is the css:
hr {
display: block;
height: 5px;
border: 0;
border-top: 10px solid #ccc;
margin: 1em 0;
padding: 0;
width:80%;
}
the line is currently not aligned with the div#main it is too much to the left:
<hr class="line">
<div id="main" class="container border">
<div class="row">
</div>
</div>
How can I align this with the div, get the same width and at the same time make it responsive?
codepen here
I guess here is what you want: codepen
you can also remove hr margin
<div>
<hr class="line container">
<div id="main" class="container border">
<div class="row">
<div class="col-lg-5"><label for="title">Title</label><input id="title" type="text" placeholder="Title placeholder" name="title" value=""><label for="temp">Temperature</label><span id="tempArea" class="row"><span class="col-lg-4"><input type="radio" id="c" class="spaceradio" value="metric" checked=""><label for="c" class="radios">℃</label></span>
<span
class="col-lg-4"><input type="radio" id="f" class="spaceradio" value="imperial"><label for="f" class="radios">℉</label></span>
</span><br><label for="temp">Wind</label><span id="windArea" class="row"><span class="col-lg-4"><input type="radio" id="n" class="spaceradio" value="true"><label for="n" class="radios">On</label></span><span class="col-lg-4"><input type="radio" id="o" class="spaceradio" value="false" checked=""><label for="o" class="radios">Off</label></span></span>
</div>
<div class="divider"></div>
<div class="col-lg-5">
<div class="border">
<div class="row">
<div class="border-right col-lg-6"><img src="http://openweathermap.org/img/w/02d.png"></div>
<div class="col-lg-6"><br>
<h2>65.34<label>℉</label></h2>
</div>
</div>
</div>
</div>
</div>
</div>
.line {
border-top: 10px solid #ccc;
padding: 0 !important;
}
Changed styles of hr to margin: 1 auto; But if only want to make it center and no need of margin at top , margin: auto is enough. Hope you got the answer
I changed this line from margin: 1em 0; to margin: 1 0;
Now hr is in center.
and width:95%;
I am using Bootstrap 4 and have some issues:
Center the input-fiels (inline)
space between these inputs
add a larg textarea under the input-fiels
This is what it looks like currently:
Here is my HTML code:
body {
background: url(https://images.pexels.com/photos/50631/pexels-photo-50631.jpeg?cs=srgb&dl=aerial-bridge-buildings-50631.jpg&fm=jpg);
background-size: cover;
background-position: center;
font-family: Lato;
color: white;
}
html {
height: 100%;
}
#content {
text-align: center;
padding-top: 25%;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
h1 {
font-weight: 700;
font-size: 5em;
}
hr {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solidrgba(0, 0, 0, 0.2);
}
input.transparent-input {
background-color: transparent;
border: 2px solid white;
}
.form-control::placeholder {
color: white;
}
/* Chrome, Firefox, Opera*/
:-ms-input-placeholder.form-control {
color: white;
}
/* Internet Explorer*/
.form-control::-ms-input-placeholder {
color: white;
}
/* Microsoft Edge */
.no-padding {
padding-right: 50px;
padding-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Zenuni Company</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-12">
<div id="content">
<h1>Contact Page</h1>
<h3>Contact Us</h3>
<hr>
</div>
<form class="form-inline">
<div class="form-group">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</form>
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</div>
</div>
I would appreciate your help!
You can do it in two ways.
the first one is using grid system, this will work in this way:
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
The second way that i think will fit better, I'm find this way more helpful when talking about responsive center.
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
Hope i could help :)
I just edited your code and added to jsfiddle
your form should be like this to achieve center inputs with margins :
<form class="form-inline justify-content-center">
<div class="form-group space-right">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group space-right">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
<button type="submit" class="btn btn-default my-2 my-sm-0">Send invitation</button>
</form>
with this line of css :
.space-right {margin-right:10px;}
You do not need to use justify-content-center for the row because col-12 takes the whole row.
Instead of form-inline, use two form-row classes inside the form - one for the two inputs and the other for the button. And use a col for each of the inputs should you like to have them side by side on all kinds of devices. Otherwise, use col-* classes as you normally would, for instance, use col-12 col-sm-6 so that they takes the whole width of its parent on mobile but half on other devices. And then use a col class for the button.
You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts. - Bootstrap-4
Restrict the width of the form only. In order to do so, use custom CSS as you have done so. If you do so, use mx-auto for the form to center it horizontally inside its container.
Should you like to have the button in the center of its parent, use text-center for its parent.
https://codepen.io/anon/pen/KBWXME
One more thing, I guess you have used align-items-center to align all the content vertically in the center. If so, use h-100 for all the parents of the container. Otherwise, align-items-center won't work.
body {
background: url(https://images.pexels.com/photos/50631/pexels-photo-50631.jpeg?cs=srgb&dl=aerial-bridge-buildings-50631.jpg&fm=jpg);
background-size: cover;
background-position: center;
font-family: Lato;
color: white;
}
html,
body {
height: 100%;
}
#content {
text-align: center;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
h1 {
font-weight: 700;
font-size: 5em;
}
hr {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solidrgba(0, 0, 0, 0.2);
}
input.transparent-input {
background-color: transparent;
border: 2px solid white;
}
.form-control::placeholder {
color: white;
}
/* Chrome, Firefox, Opera*/
:-ms-input-placeholder.form-control {
color: white;
}
/* Internet Explorer*/
.form-control::-ms-input-placeholder {
color: white;
}
.mw-500px {
max-width: 500px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.css" rel="stylesheet" />
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col">
<div id="content">
<h1>Contact Page</h1>
<h3>Contact Us</h3>
<hr>
</div>
<form class="mw-500px mx-auto">
<div class="form-row">
<div class="col-12 col-sm-6 form-group">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="col form-group">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</div>
<div class="form-row ">
<div class="col-12 col-sm-6 form-group">
<button type="submit" class="btn btn-default">
Send invitation</button>
</div>
</div>
</form>
</div>
</div>
</div>
Your input fields are not centered because they're not part of your #content element. If you move the first </div> tag after <div id="content"> below your submit button, that should take care of that issue.
I'm not sure what exactly you're looking for in terms of space between your input fields. You could just use the </br> tag to make a space, but that will probably be a little ugly. I'd recommend going into your CSS code, selecting .form-inline and messing around with the padding until you're satisfied with how it looks
I don't know exactly what you're trying to do, maybe I could help if you sketched a mock-up of what you're thinking of.
Hope this is useful!
I Currently am designing a login page in mvc and I want to seperate certain elements so they can be styled correctly. However when I create div's inside other divs they do not stick to the outer div's height and therefore move all around the page. I will give you a sample with my code.
In my Layout.cshtml page I've got
<div class="login-box-outer">
<div class="container">
<div class="login-box">
<div class="login-logo">
<a href="example" </b> Example</a>
</div>
#RenderBody()
</div>
</div>
</div>
In my register page I have the following
.form-control{
height: 35px;
}
.login-logo{
display: none;
}
.login-box, .register-box {
width: 500px;
margin: 2% auto;
}
.text-danger {
color: #a94442;
}
.login-page, .register-page {
background: url('https://example.jpg');
background-position: center;
background-size: cover;
}
##media(max-width: 400px)
{
.login-box, .register-box {
width: 300px;
margin: 4% auto;
}
}
.intl-tel-input{
display: block !important;
}
.join-section__shadow {
left:10%;
bottom:35%;
position: absolute;
padding: 96px 0 48px;
}
.join-content-layout {
background-color: transparent;
padding: 0;
max-width: 1110px;
margin: 0 auto;
position: relative;
color:white;
}
.join-xlarge {
font-size: 38px;
line-height: 44px;
font-weight: 800;
text-shadow: 0 0 3px rgba(0,0,0,.3);
}
.join-medium {
font-size: 24px;
margin-top: 10px;
font-weight: 500;
text-shadow: 0 0 1px rgba(0,0,0,.5);
}
.content-frame.purple2-bg {
background: #fff;
}
.container-fluid.support-block {
padding-top: 30px;
padding-bottom: 30px;
}
.support-block a {
text-decoration: none;
}
</style>
still in the register page here is my html
<div class="container-fluid support-block">
<div class="join-section__shadow">
<div class="join-content-layout">
<div class="col-md-12 col-sm-12">
<h1 class="join-xlarge join-headline join-h1">
Example
</h1>
<h3 class="join-medium join-h3">
Example
</h3>
</div>
</div>
</div>
<div class="col-xs-10 col-xs-push-10 noPadding" style="bottom:100px;">
<form asp-controller="Account" asp-action="Register" asp-route-returnurl="#ViewBag.ReturnUrl" method="post" role="form">
#Html.AntiForgeryToken()
<div class="box box-primary col-xs-12 boxShadow" style="border:none;margin-bottom:10px;">
<div class="form-group has-feedback col-xs-12 noPadding">
<label>Name</label>
<input asp-for="#Model.FullName" value="#Model.FullName" class="form-control" />
<span asp-validation-for="#Model.FullName" class="text-danger"></span>
</div>
</form>
</div>
</div>
<div class="container-fluid">
<div class="content-frame purple2-bg">
<div class="container-fluid support-block">
<div class="row icon-row">
<div class="col-md-4">
<i class="fa fa-tag" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
<div class="col-md-4">
<i class="fa fa-thumbs-up" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
<div class="col-md-4">
<i class="fa fa-money" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
</div>
</div>
</div>
</div>
However, under the form I want a complete new section but the content from the form and everything else seems to just float about on the page! Anybody know why this is happening?
Here is how it looks in the browser
This container should be taking up the full width of the screen but it's just floating around. Any idea as to why this is happening?
I am trying to build a simple survey with 10 questions which are stored in my database, looped through and the 10 questions are added to the page dynamically. Basically, I would like there to only be one question on the page at a time, but the page to be scrollable to see the other questions.
For example, question 1 would show up in the middle of the page, the user types their answer and clicks next, and the page scrolls to the next question. If the user scrolls up, it scrolls through the page up, and down scrolls down. For jumping to the next question I was planning on just having each question with an id and the next button just having a link to that id.
My HTML for populating the questions on the page looks like this:
<div class="container">
<div class="row wrapper">
<div class="question">
<p>What is your name?</p>
</div>
<div class="description">
<p>Used for...</p>
</div>
<div class="answer">
<input type="text" placeholder="">
</div>
</div>
</div>
My CSS for the above looks like this:
.question {
color: #232A33;
text-align: left;
font-size: 2em;
}
.description {
color: #FFCD3D;
text-align: left;
font-size: 1.25em;
}
.answer {
color: #232A33;
text-align: left;
font-size: 1.25em;
}
I managed to get the question centered on the page using the following code:
.wrapper {
width: 500px;
height: 150px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
This works fine for one question, but if there are multiple questions they all overlap each other because the position is absolute.
Any tips on how I can achieve this design for the page?
Thanks in advance!
You're very close. This can be done by adding just a tad more css in (adjusting the row class slightly).
If you add the following:
.row {
width: 100%;
margin: 15% auto;
height: 100vh!important;
}
and adjust your wrapper to **relative** positioning, you should see a good result
.wrapper {
width: 500px;
height: auto;
position: relative;
}
See snippet or fiddle
.question {
color: #232A33;
text-align: left;
font-size: 2em;
}
.description {
color: #FFCD3D;
text-align: left;
font-size: 1.25em;
}
.answer {
color: #232A33;
text-align: left;
font-size: 1.25em;
}
.row {
width: 100%;
margin: 15% auto;
height: 100vh!important;
}
.wrapper {
width: 500px;
height: auto;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row wrapper">
<div class="question">
<p>What is your name?</p>
</div>
<div class="description">
<p>Used for...</p>
</div>
<div class="answer">
<input type="text" placeholder="">
</div>
</div>
</div>
<div class="container">
<div class="row wrapper">
<div class="question">
<p>What is your name?</p>
</div>
<div class="description">
<p>Used for...</p>
</div>
<div class="answer">
<input type="text" placeholder="">
</div>
</div>
</div>
<div class="container">
<div class="row wrapper">
<div class="question">
<p>What is your name?</p>
</div>
<div class="description">
<p>Used for...</p>
</div>
<div class="answer">
<input type="text" placeholder="">
</div>
</div>
</div>
<div class="container">
<div class="row wrapper">
<div class="question">
<p>What is your name?</p>
</div>
<div class="description">
<p>Used for...</p>
</div>
<div class="answer">
<input type="text" placeholder="">
</div>
</div>
</div>
Wrong:
Correct:
How to achieve that (without spaces between elements) ? They also must be centered.
HTML:
<div class="header container">
<div class="col col-1">
<input type="text" class="text small" name="search" placeholder="Search suppliers">
</div>
<div class="col col-2">
<div class="styled-select">
<select>
<option>asd</option>
</select>
</div>
</div>
<div class="col col-3">
Reset
Search
</div>
</div>
CSS:
.header {
display: table;
width: 100%;
height: 120px;
text-align: center;
}
.header > div {
display: table-cell;
vertical-align:middle;
}
.col {
width:20%;
}
Anyone can help with that ?
Simply set all div.col with inline-block positioning and set 'text-align:center' on your container to center it horizontally.
.container {
text-align:center;
}
.container .col {
display:inline-block;
}
Use display: inline-block.
.header {
width: 100%;
height:120px;
text-align:center;
}
.col {
display: inline-block;
vertical-align:middle;
}
Also, to remove spaces between each .col, make sure that there is no white space between each opening and closing div tag.
<div class="header container">
<div class="col col-1">
<input type="text" class="text small" name="search" placeholder="Search suppliers">
</div><div class="col col-2"> <!-- THIS LINE - no white-space -->
<div class="styled-select">
<select>
<option>asd</option>
</select>
</div>
</div><div class="col col-3"> <!-- THIS LINE - no white-space also -->
Reset
Search
</div>
</div>
</div>
To get exactly what you want, you'll need an extra HTML wrapper.
http://jsfiddle.net/h37J4/
.header {
width: 100%;
height:120px;
}
.header > .row {
max-width: 360px;
margin: 0 auto;
overflow: hidden; /*quick cleafix hack */
}
.col {
float: left;
}
yoou need a wrapper for the content like this:
<div class="header container">
<div class="wrapper">
<div class="col col-1">
<input type="text" class="text small" name="search" placeholder="Search suppliers">
</div>
<div class="col col-2">
<div class="styled-select">
<select>
<option>asd</option>
</select>
</div>
</div>
<div class="col col-3">
Reset
Search
</div>
<div class="wrapper">
</div>
And then style the wrapper with css, something like this:
.header .wrapper {
width: 70%; /* or any in px */
margin: 0 auto; /* for centering */
}
Or you can just replace your ".header" element's 100% width with smaller number!