I'm trying to make a single page with a large button that is always in the absolute middle/center of the page. I want the button-text to be large, but when I make it large it offsets the button and it is no longer in the middle. What am I doing wrong here?
(I also have bootstrap installed and am glad to use rows/columns/offsets too)
CSS
.btn-text {
vertical-align: middle;
font-family: 'Corben';
font-size: 580%;
}
.wrapper {
text-align: center;
}
.btn {
position: absolute;
top: 50%;
padding: 20%;
}
HTML
...
<body>
<div class="wrapper">
<div class="btn btn-large btn-primary" id="oujh-button">
<div class="btn-text">BUTTON</div>
</div>
</div>
</body>
...
JSFiddle: https://jsfiddle.net/50ye58oe/1/
If using CSS3 transforms is OK(if you don't need to support IE<9) you could do this:
.btn{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
Another solution is to use the Bootstrap center-block class to horizontally center the button and a flexbox to vertically center it.
HTML
<div class="wrapper">
<div class="center-block btn btn-large btn-primary" id="oujh-button">
<div class="btn-text">BUTTON</div>
</div>
</div>
CSS
.btn-text {
font-family: 'Corben';
font-size: 280%;
}
.wrapper {
position: fixed;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
Related
I've got the following landing page form (I've cut all the unnecessary stuff I don't think matters leaving only minimum of style). Here is the code (I'm using Bootstrap 3.3.5):
<div class="col-md-6 app-door">
<form class="image-hover text-center">
<h3>Application name</h3>
<div class="landing-page-form-group">
<label class="landing-page-label">Label: </label>
<input class="form-control landing-page-input">
</div>
<button class="btn">Submit</button>
</form>
<div class="center-block app-link some-img"/>
</div>
..and css
.image-hover {
width: 300px;
height: 300px;
background-color: rgba(0, 0, 0, 0.7) !important;
position: absolute;
z-index: 100;
color: #cccccc;
margin: 0 auto;
left: 0;
right: 0;
border-radius: 25px;
}
.landing-page-form-group {
padding-top: 16px;
padding-bottom: 16px;
}
.landing-page-label {
width: 100px;
vertical-align: middle;
}
.landing-page-input {
width: 150px;
display: inline-block;
}
.app-link {
width: 300px;
height: 300px;
background-size: 100% 100%;
border-radius: 25px;
}
.some-img {
background-image: url("http://dl.hiapphere.com/data/icon/201511/HiAppHere_com_com.ludicside.mrsquare.png");
}
I want to center all the form inputs and etc vertically. I've tried such things as playing with position (relative on parent, absolute on child), vertical-align, top, maybe something else I don't remember right now as I spent lots of hours trying.
I'm not a great specialist in frontend development (I mean html/css) so I will be extremely happy to see understanding although the problem seems to be basic enough.
Thank you for any ideas!
updated
check the solution without flex demo here
Try this
check demo here
add the following styles to your existing .image-hover class
CSS:
.image-hover {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
Simplest method would be to use
.image-hover {
display: flex;
align-items : center;
justify-content: center;
}
The align-items takes care of vertical centering, and justify-contents, the horizontal centering.
This is my solution:
https://jsfiddle.net/0x9epxah/1/
add div .inner-form:
<div class="col-md-6 app-door">
<form class="image-hover text-center">
<div class="inner-form">
<h3>Application name</h3>
<div class="landing-page-form-group">
<label class="landing-page-label">Label: </label>
<input class="form-control landing-page-input">
</div>
<button class="btn">Submit</button>
</div>
</form>
<div class="center-block app-link some-img"/>
</div>
and this css class:
.inner-form {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
I was getting the data from an API and displaying it using HTML.
#dat {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
button {
margin-left: 20px;
display: inline;
}
<h1><u>Weather App</u></h1>
<div id="dat">
<p id="data"></p>
<p id="temp"></p>
<p id="time"></p>
<button onclick="convertc()">imperial</button>
<button onclick="convertf()">metric</button>
</div>
The problem is that both the buttons are one above another.I want to bring it on the same line.
Thanks.
You didn't allow enough width for both buttons to fit.
I changed the width to 200px;
#dat{
position:absolute;
width:200px;
height:100px;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
}
button{
margin-left:20px;
display:inline;
}
<h1><u>Weather App</u></h1>
<div id="dat">
<p id="data">
</p>
<p id="temp">
</p>
<p id="time">
</p>
<button onclick="convertc()">imperial</button>
<button onclick="convertf()">metric</button>
</div>
The problem is the buttons are inside the #dat div which is set to be only 100px wide. If you want them to be centered on the same line, add a new div outside the #dat div with width: 100% and text-align: center.
#dat {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
button {
margin-left: 20px;
display: inline;
}
#buttondiv {
width: 100%;
text-align: center;
}
<h1><u>Weather App</u></h1>
<div id="dat">
<p id="data">
</p>
<p id="temp">
</p>
<p id="time">
</p>
</div>
<div id="buttondiv">
<button onclick="convertc()">imperial</button>
<button onclick="convertf()">metric</button>
</div>
Slightly different approach then above, using floatleft; and auto width.
Created CSS classes as re-useables.
#dat {
position: absolute;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
width: auto;
}
.pull-left {
float:left;
}
.ml-10 {
margin-left: 10px;
}
<h1><u>Weather App</u></h1>
<div id="dat">
<p id="data"></p>
<p id="temp"></p>
<p id="time"></p>
<button onclick="convertc()" class="pull-left">imperial</button>
<button onclick="convertf()" class="pull-left ml-10">metric</button>
</div>
You can separate your two buttons in different div and apply CSS in each div to adjust width.
<div>
<button onclick="convertc()">imperial</button>
</div>
<div>
<button onclick="convertf()">metric</button>
</div>
Beside, you can use Bootstrap to keep them inline for every devices.
My suggestions would be as follows:
Do not use the <u> tag for underlining unlinked text. This visual mechanism signifies something clickable. Using it for non-actionable text is bad UX.
Use an <ul> tag for the data items rather than <p> tags. Semantically the information is a list and not paragraphs of textual information.
For the <div> tags, use 100% width so that your UI is scalable with the visitors viewport. The CSS will continue to center the buttons as the viewport size changes.
See the following code:
#dat {
width: 100%;
margin: 0;
}
#dat ul
{
list-style:none;
margin:10px 0;
padding:0;
}
#dat .btns
{
width:100%;
text-align:center;
}
#dat .btns button {
display: inline;
}
<h1>Weather App</h1>
<div id="dat">
<ul>
<li id="data"></li>
<li id="temp"></li>
<li id="time"></li>
</ul>
<div class="btns">
<button onclick="convertc()">imperial</button>
<button onclick="convertf()">metric</button>
</div>
</div>
The I placed a couple of header tags overlaid on my hero image. When I resize the browser the text-overlay moves up and down. Any Ideas as to how to make the text fixed in the middle of the hero image?
html:
<!--Hero-->
<div id="heroimage">
<div class="row">
<div class="small-12 small-centered columns">
<br>
<div class="heroText">
<h1>Adolfo Barreto</h1>
<h4>Web Designer</h4>
</div>
</div>
</div>
</div>
css:
// Hero
html, body, #heroimage{
width:100%;
height:100%;
}
.heroText {
text-align: center;
color: white;
margin-top: 50%;
margin-bottom: 50%;
}
#heroimage{
background: url('/../assets/img/codeHero.0.jpg') center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
My Website address is: http://adolfobarreto.atwebpages.com
.heroText {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Adjust heroText class css to
.heroText {
text-align: center;
color: white;
margin-top: 10%;
margin-bottom: 50%;
}
Hope this helps you:
According to your query , i have tested it and tried to code bit so that might help you.
What i did is :
To your "small-12 small-centered columns" DIV; i have
given it a property as position:relative;
The another one "heroText" i have given its property as width:
100%;margin-top: 28%; ; so that this will fix up your text and can be viewed in any type of browser and devices.
I tried in my desktop and it's working good.
<html>
<head>
<title></title>
<style type="text/css">
.small-centered {
/* Set the position only */
position: relative;
}
.heroText {
text-align: center;
color: white;
/* Added two lines only */
width: 100%;
margin-top: 28%;
}
</style>
</head>
<body>
<div id="heroimage">
<div class="row">
<div class="small-12 small-centered columns">
<!-- Here in above given small-12 smaill-centered columns DIV , provide 1 CSS property that, " position: relative " that will set this div to its place to be aligned in a line. -->
<br>
<div class="heroText">
<!-- Here in above given heroText DIV , provide 2 CSS property that, " width: 100%, marngin-top:28%; " this will fix up this child div and will set your texts written. -->
<h1>Adolfo Barreto</h1>
<h4>Web Designer</h4>
</div>
</div>
</div>
</div>
</body>
</html>
I suggest you to use a display table structure for this.
I don't think you need such a complicated structure, but leaving it as it is:
.heroimage .row {
display: table;
height: 100%;
}
.heroimage .row .columns {
display: table-cell;
vertical-align: middle;
}
I would delete de <br> and clean .heroText margins
Here is solution:
#heroimage{
position:relative;
}
.heroText{
position: absolute;
top: 50%;
width: 100%;
}
I have a <div> with a number of sub-elements (which happen to be custom-sized buttons). It can have between 1 and 3 buttons.
Example of HTML with 2 buttons:
<div id="head">
<div id="control-buttons-container">
<button class="control-button">some button text</button>
<button class="control-button">proceed with this button</button>
</div>
</div>
When there are 3 buttons, they fill the entire <div>, so it is not an issue. However, when there are 1 or 2 buttons, they need to be centered but I can't seem to accomplish this without introducing ridiculous conditional margins or something.
How can I modify this CSS so that <div> elements with 1 or 2 of these buttons show the buttons centered within the div?
Please refer to the Fiddle: https://jsfiddle.net/bf33wc6w/1/
Edit: With only 2 buttons, I don't want them to be spread out. I want them to be in the center with only ~2px between them similar to their spacing for when there are 3 buttons.
You could set inline block on the items, with container set to text align center.
.control-buttons-container {
text-align: center;
font-size: 0; /*fix inline block gap*/
}
.control-button {
display: inline-block;
vertical-align: top;
font-size: 12px; /*reset font size*/
}
JSFIDDLE DEMO
.control-buttons-container {
text-align: center;
font-size: 0; /*fix inline block gap*/
}
.control-button {
background-color: #0E80B4;
color: white;
outline: none;
height: 73px;
width: 128px;
margin: 3px 1.5px;
display: inline-block;
vertical-align: top;
font-size: 12px; /*reset font size*/
}
.control-button:hover {
background-color: #3FA9DB;
}
#head, #body, #foot {
border: 1px solid red;
position: absolute;
width: 396px;
height: 80px;
left: 0;
}
#head {
top: 0;
}
#body {
bottom: 50%;
-ms-transform: translateY(50%);
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
#foot {
bottom: 0;
}
<div id="head">
<div class="control-buttons-container">
<button class="control-button">some button text</button>
<button class="control-button">proceed with this button</button>
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
<div id="body">
<div class="control-buttons-container">
<button class="control-button">proceed with this button</button>
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
<div id="foot">
<div class="control-buttons-container">
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
Updates:
Fixed same id being used multiple times on a single page, which is in valid HTML - changed it to class.
Improved the position of middle block, make it to always stay in the middle more accurately - by using CSS transform.
Merged some duplicated CSS rules.
Like this:https://jsfiddle.net/bf33wc6w/7/
All I did was change your float to none and the margin to auto for the left and right margin?
.control-button {
background-color: #0E80B4;
color: white;
outline: none;
border: none;
height: 73px;
width: 128px;
margin: 3px auto;
}
Add these style rules:
#head, #body, #foot { text-align: center; }
#control-buttons-container { display: inline-block; }
As an aside, you shouldn't use the same id (control-buttons-container) multiple times in one document. You should use a classname instead.
Updated fiddle: https://jsfiddle.net/mr8e7kyt/
Try something like this:
<div id="control-buttons-container">
<div class="col-1">
<button class="control-button">some button text</button>
</div>
<div class="col-2">
<button class="control-button">proceed with this button</button>
</div>
<div class="col-3">
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
<div id="control-buttons-container">
<div class="col-1">
</div>
<div class="col-2">
<button class="control-button">proceed with this button</button>
</div>
<div class="col-3">
</div>
</div>
.control-button {
background-color: #0E80B4;
color: white;
outline: none;
border: none;
float: left;
height: 73px;
width: 100%;
}
.control-button:hover {
background-color: #3FA9DB;
}
#control-buttons-container {
max-width: 400px;
padding: 1px;
border: 1px solid red;
}
.col-1, .col-2, .col-3 {
width: 32.6%;
display: inline-block;
margin: auto
}
Isn't flawless, but it was made in a couple of minutes and gets the job done: JSFiddle
For the containers without 3 items you should remove the float: left; for the buttons inside it. Leave it for the one with 3 items. Then you can just set text-align: center; on the container.
You can add a class like no-float on the containers you want to control whether its children should be floated or not.
https://jsfiddle.net/bf33wc6w/10/
This answer will probably help you out. Wrap your buttons in a container, give it a fixed width, and change margin to auto. Be sure to remove float: left.
http://i.imgur.com/Veauoig.png
I am currently trying to work out how to make the 'From £' text to keep in the same position as the buttons above. The page is responsive so I have been unable to keep the text in one position.
The CSS I have used so far -
element.style {position: absolute; width: 97%;}
I put each of the 'From £' parts in their own class. Not sure if there is an easier way?
<div class="price2">From £300</div>
Any help would be great. Thanks!
Add a container for the element for the price and button so that they remain in context with each other.
http://jsfiddle.net/05orkj1a/
.prices{
width: 100%;
}
.price-column{
display: table-cell;
width: 33%;
text-align: center;
margin: 0 auto;
padding: 0 5px;
}
<div class="prices">
<div class="price-column">
<button>Bass</button>
<div class="price2">From £65</div>
</div>
<div class="price-column">
<button>Mid</button>
<div class="price2">From £300</div>
</div>
<div class="price-column">
<button>Treble</button>
<div class="price2">From £715</div>
</div>
</div>
You could also Float the columns left to cause them to collapse vertically as the screen shrinks with the same html. Just change the margin or padding depending on how far apart you want them spaced
http://jsfiddle.net/z6agt11e/
.prices{
width: 100%;
overflow: hidden;
}
.price-column{
display: block;
float: left;
text-align: center;
padding: 5px 5px;
}
You can also add an outer container and then create a inner container for each button-price set.
Here is the HTML code:
<div class="outter">
<div class="block">
<div class="button">button1</div>
<div class="price2">From £65</div>
</div>
<div class="block">
<div class="button">button2</div>
<div class="price2">From £300</div>
</div>
<div class="block">
<div class="button">button3</div>
<div class="price2">From £715</div>
</div>
</div>
Here the CSS:
.outter{
width:100%;
}
.block{
width:33%;
background-color: yellow;
float:left;
text-align: center;
}
And here a jsfiddle:
http://jsfiddle.net/SoniaGM/ej4mdwx9/1/
Hope it helps.
You can use the CSS3 ::after pseudo-selector.
Give at button class:
position: relative;
Then you have to write something lime this:
.button-class::after {
content: 'From £300';
background: transparent;
height: 1%;
width: 3%;
position: absolute;
top: 20px;
left: 0px;
}
Obviously, you have to change height: 1%; width: 3%; and top: 20px; left: 0px;with whatever you want!