Tips for easily centering form elements using simple_form

Having trouble center aligning all the form elements in a simple_form-built form? I attempted to do so by creating a .simple_form class and adjusting attributes like float, text-align, etc. However, my efforts were unsuccessful.

.simple_form {
    float: none;
    text-align : center;
    margin-right: auto;
    margin-left: auto;
    position: auto;
}
/*
.simple_form label {
  float: left;  
  width: 100px;   
  margin: 2px 10px; 
}  

.simple_form div.input {  
  margin-bottom: 10px;  
  margin: 2px 10px; 
}  

.simple_form div.boolean, .simple_form input[type='submit'] {  
  margin-left: 120px; 
  margin: 2px 10px; 
}  

.simple_form div.boolean label {  
  float: none;  
  margin: 0; 
  margin: 2px 10px; 
} 
*/

HTML

<h1>Submit page </h1>
<%= simple_form_for Post.new  do |f| %> 
<%= f.input :title  %>
<%= f.input :blurb %> 
<%= f.input :funding_goal %>
<%= f.input :funding_duration %>   
<%= f.button :submit %>  
<% end %>
htmlcssformsruby-on-rails-4erb

Answer №1

JSFIDDLE

To give your input tags a display of inline-block, use the following CSS:

.styled_form {
    float: none;
    text-align: center;
    border: 1px solid #CCC;
}
.styled_form .input-box {
    margin-bottom: 10px;
}
.styled_form input {
    margin-bottom: 10px;
    margin: 2px 10px;
    display: inline-block;
}

Your HTML structure should be like this:

<form class="styled_form">
  <div class="input-box">
    <input type="text" />
  </div>
  <div class="input-box">
    <input type="text" />
  </div>
  <div class="input-box">
    <input type="text" />
  </div>
  <input type="submit" />
</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extract the URL of the background image from a preexisting <div> element, or append a new attribute to the background-image property

I am facing a challenge in updating the existing background-image with a linear gradient. Currently, my CMS is generating a background-image, but I am unable to adjust the opacity using a linear gradient. My goal is to darken the background-image using CSS ...

javascriptjquerycssbackground-image

Invert the motion within a photo carousel

Is there anyone who can assist me with creating a unique photo slider using HTML, CSS, and JS? Currently, it includes various elements such as navigation arrows, dots, and an autoplay function. The timer is reset whenever the arrows or dots are clicked. Ev ...

javascripthtmlcss

Tips for connecting a DOM element when a link is clicked

I am currently browsing http://localhost:8000/index.html My goal is to navigate to localhost:8006/someAddress and interact with an element with the id '157579' as well as click on a button with the id '1787' that will trigger a change ...

javascriptjqueryhtmlajaxdom

Is there a way to position a heart-shaped animation element on the top right corner of a Bootstrap card image?

I am looking to incorporate an animation in the upper right corner of the bootstrap image, but I'm unsure about how to go about it. Here is the concept I have in mind: https://i.sstatic.net/rIvky.jpg Specifically, I'd like to include a heart an ...

cssbootstrap-4

Modifying the state object in ReactJS: A step-by-step guide on updating values

Below my query and explanation, you will find all the code. I am currently attempting to update the state in a grandparent class. This is necessary due to file-related reasons, and I am using Material-UI for text boxes. Additionally, I am implementing Red ...

javascripthtmlreactjsmaterial-ui

Formatting code within an HTML document

I am attempting to customize a stock widget that I obtained from financialcontent.com. My current approach involves using Bootstrap for styling purposes. To incorporate the widget into a div, I found it necessary to embed the script directly within the HT ...

javascripthtmlcsstwitter-bootstrapweb

Ways to shorten a card

Below is a snippet of code that I have been working on. <div class="thim-course-grid"> <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <div class="lpr_course <?php echo ' ...

phphtmlcss

Can the start and stop times of the typed.js plugin be controlled for typing text?

The typed.js jQuery plugin creates the illusion of text being automatically typed on screen by a robot. Despite researching the resources related to this plugin, I have not come across any information on how to control the starting and stopping of the typi ...

javascriptjqueryhtmlcssautomation

Creating a function for loading dynamic content in XSLT can be achieved by following these steps

When I call the function collapseandexpand() for static elements only, it does not work. Now, how can I create the same function to handle dynamic content in xslt? Javascript Code: <script language="javascript" type="text/javascript> <xsl:text&g ...

javascripthtmlxslt

Show specific hyperlinks in Django depending on the user group

{% extends 'base.html' %} {% block content %} <p>Welcome to the homepage.</p> <p>{% user.groups.all() %}</p> {% endblock %} Currently, I'm exploring ways to display all the user's groups on the page. Howeve ...

htmldjangotemplates

Learn how to change the input source in Ratchet's chat app to come from a text box on the webpage instead of the console

I followed the guidelines on to create a chat app. However, I now want to input data from a text box instead of using conn.send() in the console. How can I achieve this using php? I was successful in redirecting the sent message to an html element like ...

phpjavascriptjqueryhtmlratchet

Error in URL parsing while using Jsoup on Android platform

Can anyone assist me in parsing an HTML site? I am trying to extract the image source and link to another page, but I keep getting an empty list. Here is my code: Elements elems2 = doc.select("div"); for (Element elem2 : elems2) { if (elem2.attr("clas ...

javaandroidhtmljsoup

How can I align an image in relation to text?

I'm attempting to create an interesting layout where I have text centered with an image on each side, like this | | | text[image] | | [image]text | | | My goal is to have the text centered within t ...

htmlcssposition

Calculating the percentage difference between two dates to accurately represent timeline chart bar data

I am in the process of creating a unique horizontal timeline chart that visually represents the time span of milestones based on their start and finish dates. Each bar on the timeline corresponds to a milestone, and each rectangle behind the bars signifies ...

javascriptcssreactjstypescriptdatetime

How can I ensure my custom CSS stylesheet takes precedence over Inline CSS when working with Bootstrap?

Looking to enhance the visual appeal of my website by incorporating CSS properties for background changes. Take a peek at my code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta ...

htmlcssbootstrap-5

CSS Selectors do not apply to AngularJS ng-class

In the process of developing an Ionic application, I encountered a strange issue where the dynamic class set through ng-class suddenly stopped working. Despite being correctly resolved in the HTML, the selectors associated with it simply do not apply. Her ...

htmlcssangularjsionic-framework

Maintain the basic structure while ensuring divs are properly aligned

Behold, my div structure! ONE // at the top level TWO THREE // two divs side by side in the middle level FOUR // residing at the bottom <div id="ONE"> <div></div> <div><img src="logo.png"></div> </div> < ...

htmlcss

Which HTML layout is more efficient for the web browser?

It seems to be widely believed that we should only use tables for tabular data, and not for layouting. I agree with this principle and understand the reasons behind it, including performance considerations. Has anyone conducted real benchmarks comparing ...

htmlperformancebrowserlayout

Transmit information from an index to a Bootstrap popup

Seeking assistance with passing data from the index page to a modal. Below is the code snippet for the modal: Modal <div class="modal modal-1 fade bd-example-modal-lg " id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleMod ...

javascriptjqueryhtmlbootstrap-4

Retrieve information from individual XML nodes in a parsed string

When making an Ajax call to retrieve XML data from a different domain using a PHP proxy to bypass cross-origin restrictions, I am unable to extract the values from the XML nodes and display them in my HTML tags. Despite no errors showing up in the browser ...

javascriptphphtmlajaxxml