Joomla! 4.x Coding • How to Center Button on Contact Form in CSS

I'm using the FlexiContact Contact form and it appears they are no longer around. The contact form still works great though. I have a very simple question: What do I have to change in the CSS to have the button move to the center bottom of the form instead of it being far left? I know I need to gain more knowledge (Or refresh up) on CSS Stylesheets! Any help would be appreciated!

/* Flexicontact 14.00 */

div.fc_outer {border:1px solid lightgray;padding:50px 10px 10px 10px;background-color:#f9f9f9;border-radius:3px;font-size:1rem}
div.fc_line {box-sizing:border-box;margin-top:.125em}
div.fc_line label {box-sizing:border-box;display:inline-block;min-height:2.28em;padding:0;margin:0 1% 0 0;vertical-align:top;
font:normal normal normal .875em Arial, Tahoma, sans-serif;line-height:2.28em}
div.fc_line input.fc_input {box-sizing:border-box;display:inline-block;height:2.13em !important;padding:.25em .375em;margin:0;vertical-align:top;
font:normal normal normal .9375em Arial, Tahoma, sans-serif}
div.fc_line textarea.fc_input {box-sizing:border-box;display:inline-block;line-height:normal;margin:0;padding:.25em .375em;min-height:2.13em;height:auto !important;
font:normal normal normal .9375em Arial, Tahoma, sans-serif}
div.fc_line select.fc_input {box-sizing:border-box;display:inline-block;padding:0 .25em;margin:0;width:auto;height:2.13em !important;
font:normal normal normal .9375em Arial, Tahoma, sans-serif}

/* field appearance */

div.fc_line input.fc_input, div.fc_line select.fc_input, div.fc_line textarea.fc_input {border:1px solid lightgray;border-radius:3px;transition:border-color 0.4s ease 0s}
div.fc_line input.fc_input:hover, div.fc_line textarea.fc_input:hover, div.fc_line select.fc_input:hover {outline:none;border-color:#999}
div.fc_line input.fc_input:focus, div.fc_line textarea.fc_input:focus, div.fc_line select.fc_input:focus {outline:none;border-color:#0079C1;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.075)}

div.fc_line input:focus:invalid, div.fc_line textarea:focus:invalid, div.fc_line select:focus:invalid {
border-color:#277ac2;box-shadow:none}

div.fc_line.fc_err .fc_input {border-color:#277ac2}
div.fc_line.fc_err .fc_input:focus {border-color:gray;box-shadow:none}
div.fc_line.fc_req label:after {content:"*";color:#444444;padding-left:2px}
div.fc_line.fc_req.fc_err label:after {color:red}

/* error messages */

.fc_error {display:block;font-size:small;color:#277ac2;margin-left:22%}
.fc_top_error {margin-bottom:10px}
.fc_error.fc_green {color:#2E7D32}
.fc_error.fc_red {color:#ee4e2f}
.fc_error.fc_orange {color:#f39331}
.fc_error.fc_black {color:#444}

/* image captcha */

div.fc_image_inner {text-align:center}
div.fc_image_inner img {display:inline;transition:all .2s}
div.fc_image_inner img.fc_inactive {border-radius:5px;border:2px solid transparent}
div.fc_image_inner img.fc_active {border-radius:5px;border:2px solid #277ac2;box-shadow:2px 2px 7px 0px rgba(0,0,0,0.63)}

/* captcha plugin */

div.fc_line.fc_jcap {text-align:center}
#fcjcap {display:inline-block}

{

}
/* form layout */

div.fc_line label.fc_left {text-align:right;width:20%}
div.fc_line input[type="checkbox"] {margin:0 1% 0 0;height:1em;width:1em;vertical-align:middle}
div.fc_line input[type="text"],
div.fc_line input[type="email"] {width:75%;max-width:100%}
div.fc_line textarea.fc_input {width:75%;max-width:100%}

/* Send button */

div.fc_send input.fc_button {display:inline-block;box-sizing; border-box;background-color:#0079C1;border:none;
width:auto;margin:.25em .375em;padding:.625em 2.2em;font-size:1em;color:white !important;
text-align:center;-webkit-appearance:none;cursor:pointer;transition:all .2s}
@media (hover:hover) {div.fc_send input:hover, div.fc_send input:focus {filter:brightness(0.9);text-decoration:none;border:none;box-shadow:none;outline:none} }
div.fc_send input.fc_button:disabled {opacity:.4;cursor:not-allowed}
div.fc_send input.fc_green {background-color:#2E7D32}
div.fc_send input.fc_red {background-color:#ee4e2f}
div.fc_send input.fc_orange {background-color:#f39331}
div.fc_send input.fc_black {background-color:#444}

/* terms and conditions iframe */

.fc_toggle_terms {color:#0079C1;cursor:pointer;background-color:transparent;border:none;padding:0;margin:0;font-size:1em}
.terms-frame {width:100%;height:300px;background-color:white;border:2px inset lightgray}
.fc_terms_inactive {display:none}

/* responsive */

@media screen and (max-width:800px)
{
div.fc_line label.fc_left {display:block;text-align:left;width:auto;min-height:0;line-height:1.4em;margin-top:0.5em}
div.fc_line input.fc_input[type="text"], div.fc_line input.fc_input[type="email"], div.fc_line textarea.fc_input {width:100%}
.fc_error {margin-left:0}
div.fc_send {margin-top:1em;text-align:center}
div.fc_send input.fc_button {margin:0;min-width:50%}
div.fc_outer {max-width:calc(100% - 20px) !important}
}

@media screen and (max-width:600px)
{
div.fc_send input.fc_button {width:100%}
}

Statistics: Posted by Surfman — Fri Dec 06, 2024 11:23 pm

---