center all text inside the box
Devin created the topic: center all text inside the box
Hi all,
Having an issue with the forms CSS, i need the physical text to center to the page and not the margin to be centered:
As per the attached, you can see the box is centered to the page but the contents are floating left.
My CSS is as per below:
.recaptcha_input_area input
{
height:initial !important;
}
input[type="radio"]
{
border:none !important;
outline:none !important;
}
input[type="checkbox"]
{
border:none !important;
outline:none !important;
}
a.ui-spinner-button
{
border-radius:0px !important;
background: none!important;
}
a.ui-slider-handle {
width: 8px;
height: 8px;
top: -4px;
border: 0px;
border-radius: 13px;
background: #FAFAFA;
border: 3px solid #B1B1B1;
outline: none;
}
.ui-slider {
height: 6px;
background: #F5F5F5 !important;
margin: 7px 0px;
}
.wdform_grading input {
width: 100px;
}
.wdform-matrix-cell input[type="text"] {
width: 100px;
}
.wdform-matrix-cell select {
width: 60px;
}
.wdform_section .wdform_column:last-child {
padding-right: 0px !important;
}
.wdform_preload {
display: none;
}
.wdform_grading {
padding: 3px 0px;
}
.wdform-matrix-table {
display: table;
border-spacing: 0px;
}
.wdform-matrix-column {
text-align: left;
display: table-cell;
}
.wdform-matrix-cell {
text-align: center;
display: table-cell;
padding: 6px 10px;
}
.wdform-matrix-head>div {
display: table-cell;
text-align: center;
}
.wdform-matrix-head {
display: table-row;
}
.wdform-matrix-row0 {
background: #DFDFDF;
display: table-row;
}
.wdform-matrix-row1 {
background: #E9E9E9;
display: table-row;
}
.selected-text {
text-align: left;
color: #000;
}
.wdform-quantity {
width: 30px;
margin: 2px 0px;
}
.wdform_scale_rating label {
vertical-align: middle;
}
.ui-corner-all {
border-radius: 0px;
}
.ui-widget-content {
border: 0px;
background: transparent;
}
.ui-slider-range {
background: #8A8A8A !important;
}
.wdform_map {
border: 6px solid #fff;
}
.wdform-page-and-images {
width: 100%;
border: 0px solid #000 !important;
}
.paypal-property {
display: inline-block;
margin-right: 15px;
vertical-align: middle;
}
.sel-wrap {
display: inline-block;
vertical-align: middle;
width:100%;
}
.sel-imul {
display: none;
}
.sel-imul .sel-selected {
cursor: pointer;
position: relative;
display: inline-block;
border-radius: 0px;
padding: 0px 0px 0px 2px;
font-size: 13px;
height: 30px;
line-height: 22px;
overflow: hidden;
background: #F8F8F8;
border: 0px solid #D3D3D3;
background-position: right 2px center;
width: 100%;
}
.sel-imul.act .sel-selected {
background: #fff;
}
.sel-selected .sel-arraw {
height: 23px;
width: 30px;
background: url([SITE_ROOT]/components/com_formmaker/images/09/01.png) 50% 50% no-repeat;
position: absolute;
top: 0px;
right: 0px;
padding: 0px;
}
.sel-imul:hover .sel-selected .sel-arraw {
// background-color:#e0e0e0;
// border-left:1px solid #bbb;
}
.sel-imul.act .sel-selected .sel-arraw {
// background-color:#e0e0e0;
// border-left:1px solid #bbb;
}
.sel-imul .sel-options {
background: #fff;
border: 1px solid #dbdbdb;
border-top: none;
position: absolute;
width: inherit;
display: none;
z-index: 10;
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
.sel-options .sel-option {
padding: 3px 4px;
font-size: 13px;
border: 1px solid #fff;
border-right: none;
border-left: none;
text-align: left;
}
.sel-options .sel-option:hover {
border-color: #dbdbdb;
cursor: pointer;
}
.sel-options .sel-option.sel-ed {
background: #dbdbdb;
border-color: #dbdbdb;
}
input[type=text]{
margin: 0px;
}
input[type=password]{
margin: 0px;
}
input[type=url]{
margin: 0px;
}
input[type=email]{
margin: 0px;
}
input.text{
margin: 0px;
}
input.title{
margin: 0px;
}
textarea{
margin: 0px;
}
select {
margin: 0px;
}
.form-error {
border-color: red !important;
}
.form-error:focus {
border-color: red !important;
}
.wdform-field {
display: table-cell;
padding: 5px 0px;
text-align: center;
}
.wdform-label-section{
text-align: left;
display: table-cell;
color:white;
}
.wdform-element-section {
text-align: center;
display: table-cell;
height: 30px;
}
.file-upload input {
position: absolute;
visibility: hidden;
}
.file-upload-status {
margin-left: 10px;
max-width: 200px;
font-weight: bold;
font-size: 16px;
color: #888;
position: absolute;
border-radius: 0px;
height: 23px;
padding-left: 5px;
padding-right: 5px;
white-space: nowrap;
overflow: hidden;
}
.file-picker {
width: 41px;
height: 32px;
background: url([SITE_ROOT]/components/com_formmaker/images/10/02/upload.png) no-repeat;
display: inline-block;
}
.next-page div.wdform-page-button {
color: #FFF;
cursor: pointer;
display: inline-block;
height: 38px;
line-height: 35px;
background:url([SITE_ROOT]/components/com_formmaker/images/10/next.png) no-repeat right #000;
padding: 0px 36px 0 20px;
vertical-align: middle;
font-size: 18px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}
.previous-page div.wdform-page-button {
color: #A2A2A2;
cursor: pointer;
display: inline-block;
height: 37px;
line-height: 35px;
background:url([SITE_ROOT]/components/com_formmaker/images/09/previous.png) no-repeat left #F1F1F1;
padding: 0 20px 0 36px;
vertical-align: middle;
font-size: 18px;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
}
.button-submit {
color: #ffffff;
cursor: pointer;
display: inline-block;
line-height: 35px;
background: #000;
padding: 0px 20px;
vertical-align: middle;
font-size: 18px;
min-width: 80px;
min-height: 35px;
font-family: Segoe UI;
border: 1px solid transparent;
margin: 5px;
}
.button-reset {
color: #787878;
cursor: pointer;
display: inline-block;
line-height: 35px;
background: #F0EFEF;
padding: 0px 20px;
vertical-align: middle;
font-size: 18px;
min-width: 80px;
min-height: 35px;
font-family: Segoe UI;
float: right;
border: 1px solid transparent;
margin: 5px;
}
.wdform_page {
background:transparent;
padding-top: 15px;
border-radius: 0px;
font-family: Arial;
text-align: center;
}
.wdform_column {
border-right: none !important;
padding-right: 20px !important;
float: none;
border-spacing: 2px;
border-collapse: separate !important;
text_align: center;
}
.wdform_section_break2 {
color: #000;
display: inline-block;
text-align: left;
font-size: 23px;
margin: 16px 10px 40px 0px;
}
.wdform_section_break {
color: #000;
font-size: 23px;
margin: 16px 0px;
}
.wdform_section {
display: inline-block;
color: white;
text-align: center;
}
select {
padding: 2px;
height: 30px;
order: 1px solid #B7B7B7;
border-radius: 0px;
background: #F8F8F8;
}
input[type="text"]{
border-radius: 0px;
height: 30px;
padding:0 3px !important;
box-shadow:none;
background: #F8F8F8;
border:1px solid #B7B7B7;
}
input[type="password"]{
border-radius: 0px;
height: 22px;
padding:0 3px !important;
box-shadow:none;
background: #F8F8F8;
border:1px solid #B7B7B7;
}
textarea {
border-radius: 0px;
height: 30px;
padding:0 3px !important;
box-shadow:none;
background: #F8F8F8;
border:1px solid #B7B7B7;
}
input[type="text"]:focus{
outline: none;
box-shadow:none;
}
input[type="password"]:focus{
outline: none;
box-shadow:none;
}
textarea:focus{
outline: none;
box-shadow:none;
}
select {
outline: none;
}
.input_deactive {
color: #999999;
font-style: italic;
}
.input_active {
color: #000000;
font-style: normal;
}
.am_pm_select {
width: 30px;
vertical-align: middle;
}
.wdform-calendar-button {
display:inline-block;
background: transparent url([SITE_ROOT]/components/com_formmaker/images/03/date.png) no-repeat;
border: 0px;
color: transparent;
width: 22px;
height: 22px;
position: relative;
left: -22px;
vertical-align: top;
outline: none;
}
.forlabs {
float: right;
margin-right: 20px;
}
.if-ie-div-label {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
filter: alpha(opacity=100) !important;
opacity: 1 !important;
}
.wdform-ch-rad-label {
display: inline;
margin-right:5px;
float: left;
color: #000;
cursor: pointer
}
textarea {
padding-top: 5px;
}
.wdform-date {
display:inline-block;
width: 105px
}
.wdform_footer {
margin-top: 15px;
}
.page-numbers {
vertical-align: middle;
}
.time_box {
text-align: right;
width: 30px;
vertical-align: middle
}
.mini_label {
font-size: 10px;
font-family: 'Lucida Grande', Tahoma, Arial, Verdana, sans-serif;
color: #8A8A8A;
}
.wdform-label {
border: none;
color: #FFF;
vertical-align: top;
line-height: 17px;
Font-size:120%;
font-weight: bold;
}
.wdform_colon {
color: #000
}
.wdform_separator {
font-style: bold;
vertical-align: middle;
color: #000;
}
.wdform_line {
color: #000
}
.wdform-required {
border: none;
color: red;
vertical-align: top;
}
.captcha_img {
border-width: 0px;
margin: 0px;
padding: 0px;
cursor: pointer;
border-radius: 0px;
}
.captcha_refresh {
width: 30px;
height: 30px;
border-width: 0px;
margin: 0px;
padding: 0px;
vertical-align: middle;
cursor: pointer;
background-image: url([SITE_ROOT]/components/com_formmaker/images/refresh_black.png);
}
.captcha_input {
height: 20px;
border-width: 1px;
margin: 0px;
padding: 0px;
vertical-align: middle;
}
.file_upload {
border: 0px solid white;
border-radius: 0px;
margin: 0px;
padding: 0px;
color: black;
background-color: white;
}
.page_deactive {
color: #000;
background-color: #FFF;
cursor: pointer;
display: inline-block;
height: 29px;
text-align: center;
vertical-align: bottom;
padding: 5px 25px 0px 25px;
font-size: 20px;
font-weight:bold;
}
.page_active {
color: #FFF;
cursor: pointer;
background-color: #000;
display: inline-block;
vertical-align: bottom;
height: 29px;
text-align: center;
font-size: 20px;
padding: 5px 25px 0px 25px;
line-height: 26px;
font-weight:bold;
}
.page_percentage_active {
padding: 0px;
margin: 0px;
border-spacing: 0px;
height: 16px;
line-height: 16px;
font-size: 15px;
float: left;
text-align: right !important;
z-index: 1;
position: relative;
vertical-align: middle;
background: #000;
color: #fff;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.page_percentage_deactive {
height: 16px;
line-height: 16px;
background-color: #F1F1F1;
text-align: left !important;
margin-bottom: 1px;
border-radius: 5px;
}
.page_numbers {
font-size: 14px;
color: #000;
}
.phone_area_code {
width: 50px;
}
.phone_number {
width: 100px;
}
button {
cursor: pointer;
}
.other_input {
border-radius: 0px;
border-width: 1px;
height: 16px;
font-size: 12px;
padding: 1px;
margin: 1px;
z-index: 100;
position: absolute;
}
.wdform_page_navigation {
text-align: center !important;
}
.wdform_percentage_text {
margin: 3px 5px 3px 9px;
color: #FFF;
font-size: 12px;
}
.wdform_percentage_title {
color: #6E6E6E;
font-style: italic;
margin: 0px 0px 0px 40px;
display: inline-block;
line-height: 27px;
height: 27px;
vertical-align: middle;
}
.wdform_button button {
background: #4D792C;
cursor: pointer;
font-size: 17px;
border-radius: 0px;
min-width: 80px;
min-height: 31px;
color: #fff;
border: 2px solid #68943B;
margin: 5px;
box-shadow: 0px 0px 2px #c9c9c9;
font-family: Segoe UI;
}
Please Log in or Create an account to join the conversation.
6 years 7 months ago
Anoush replied the topic: center all text inside the box
Dear Devin,
It is again is not possible to open the link of your website. Please recheck and let us know about that.
Thanks and have a good day!
Please Log in or Create an account to join the conversation.
6 years 7 months ago
Devin replied the topic: center all text inside the box
Hi Anoush,
My website address hosting the form is:
predicthero.com/index.php/make-your-picks
Please Log in or Create an account to join the conversation.
6 years 7 months ago
Devin replied the topic: center all text inside the box
Got it working, ammended my customised CSS by setting margin to auto and creating a width
Please Log in or Create an account to join the conversation.
6 years 7 months ago
Anoush replied the topic: center all text inside the box
Dear Devin,
It is very nice to hear 
Please let me know if there's any further information you need. Have a nice day!
Please Log in or Create an account to join the conversation.
6 years 7 months ago
Time to create page: 0.194 seconds