Alignment of buttons on page in accordance with above text

text-align
text-align: justify html
how to center a button in css
bootstrap
button alignment in bootstrap
how to position text in html
w3schools
button align:center bootstrap

Add to Cart alignment

See Above Image

I'm trying to get an 'Add to Cart' button to align with the others in the same row of a page. I'm currently only aware of doing this one of two ways:

  1. Adding whitespace between one of the elements to ensure proper alignment
  2. Setting a fixed height to each product element

The problem is that when the text becomes longer and begins to wrap (as displayed in the image), the buttons become vertically misaligned on the page.

Which would be the better choice in this situation, and how might I go about getting started in completing that task?

HTML Markup:

<article class="card ">
<figure class="card-figure">
    <div class="sale-badge animated bounceIn"><span>Sale</span></div>
    <a href="/olio-trevi-extra-virgin-olive-oil-500ml/" tabindex="0">
        <div class="card-img-container">
            <img class="card-image lazyautosizes lazyloaded" data-sizes="auto" src="https://cdn11.bigcommerce.com/s-zji14g4v8/images/stencil/180x180/products/949/1182/trevi__64427__36013.1544206184.jpg?c=2" data-src="https://cdn11.bigcommerce.com/s-zji14g4v8/images/stencil/180x180/products/949/1182/trevi__64427__36013.1544206184.jpg?c=2" alt="Olio Trevi Extra Virgin Olive Oil - 500ml" title="Olio Trevi Extra Virgin Olive Oil - 500ml" width="180" height="180" sizes="130px">
        </div>
    </a>
    <figcaption class="card-figcaption">
        <div class="card-figcaption-body">
            <a href="#" class="button button--primary button--icon quickview" data-product-id="949" data-title="Quick view" tabindex="0">
                <i class="icon">
                    <svg>
                        <use xlink:href="#icon-eye"></use>
                    </svg>
                </i>
            </a>
            <a href="/wishlist.php?action=add&amp;product_id=949" class="button button--primary button--icon wishlist" data-title="Add to Wish List" tabindex="0">
                <i class="icon">
                    <svg>
                        <use xlink:href="#icon-heart"></use>
                    </svg>
                </i>
            </a>
        </div>
    </figcaption>
</figure>
<div class="card-body">
    <h4 class="card-title">
        <a href="/olio-trevi-extra-virgin-olive-oil-500ml/" tabindex="0">Olio Trevi Extra Virgin Olive Oil - 500ml</a>
    </h4>
    <p data-test-info-type="summary">This fresh, fruity, and intensely green Umbrian olive oil has been produced in the Trevi hillsides for 2,000 years. The production techniques are not …</p>
    <p class="card-text" data-test-info-type="productRating">
        <span class="rating--small">
            <span class="icon icon--ratingEmpty">
                <svg>
                    <use xlink:href="#icon-star"></use>
                </svg>
            </span>
            <span class="icon icon--ratingEmpty">
                <svg>
                    <use xlink:href="#icon-star"></use>
                </svg>
            </span>
            <span class="icon icon--ratingEmpty">
                <svg>
                    <use xlink:href="#icon-star"></use>
                </svg>
            </span>
            <span class="icon icon--ratingEmpty">
                <svg>
                    <use xlink:href="#icon-star"></use>
                </svg>
            </span>
            <span class="icon icon--ratingEmpty">
                <svg>
                    <use xlink:href="#icon-star"></use>
                </svg>
            </span>
            <!-- snippet location product_rating -->
        </span>
    </p>
    <div class="card-text" data-test-info-type="price">
        <div class="price-section non-sale-price---withoutTax price-section--withoutTax ">
            <span class="price-was-label">Was:</span>
            <span data-product-non-sale-price-without-tax="" class="price price--rrp"> $29.99</span>
        </div>
        <div class="price-section">
            <span class="price-now-label">
            Now:
            </span>
            <span data-product-price-without-tax="" class="price price--withoutTax"> $25.99</span>
        </div>
    </div>
    <a href="/olio-trevi-extra-virgin-olive-oil-500ml/" class="button button--primary button--cartAction" data-product-id="949" tabindex="0">Choose Options</a>
</div>

CSS Markup (.card-title)

.card-title {
    font-size: 1rem;
    margin: 0 0 1rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

CSS Markup (.card)

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: $fff;
    background-clip: border-box;
    border: 1px solid;
    border-radius: 0.25rem;
}

Resizing the product images to have uniform height would fix alignment without using any CSS.

Alternatively, setting a min-height equal to the tallest image on all images should align all of the items.

Alignment, font styles, and horizontal rules in HTML documents, Here we only discuss the meaning of the align attribute for text. may be floated to one side of the page, temporarily altering the margins of text that may flow on  I got the two buttons in two columns. Now I need to adjust the alignment but don’t see where there is. I need the text in the left column ‘Get A Free sample’ to be left aligned to the left margin (like all the text on my page) I need the Request a Call button to be center aligned on the page. Could you advise where to go for that please

Adding whitespace is not a sound solution. Setting the same fixed height would work, you have the option of playing with "margin", "padding" and "line-height" to achieve the desired results.

CSS: centering things, CSS has the property 'text-align' for that: P { text-align: center } H2 { text-align: center } margins, thanks to the value 'center' of the CSS property 'text-align'. is too narrow for the whole sentence will the sentence be broken over several lines. Newsletter text is often justified, making for a tidier-looking page. The image below shows some examples of the four types of alignment for a Word document. To change one paragraph’s alignment, move the insertion point into it, or select any (or all) text within it.

I would try this with flexbox using the align items stretch (min/max height for products) and bottom align your add to cart link.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

How to set the button alignment in Bootstrap ?, Buttons in 'container' class can be aligned with the 'text-align' properties. Wrap the group of buttons inside a div and align them using the following classes, .text-​  Dear Experts, I am having a very hard time in trying to align the page controls in Fluid page horizontally. Actually, there are four controls - Two buttons, two text boxes and one Static Label. All these four elements should appear horizontally in one line one after another and towards the right end of the page. To achieve this, I have done many

Better to set fixed height for block before button or make position for button related to main block use css option "position" for product block as "relative" and for button as "absolute" and set it to bottom (bottom: 0;). You can read more here: https://www.w3schools.com/css/css_positioning.asp

Microsoft Office 2011 for Macintosh, Illustrated Fundamentals, You can change the alignment, or position of text within a document's margins that it is 1.15 spaced, and you want more space both above and below the paragraph. so a paragraph can be as short as a one-word title or many pages long. 2. Click the Center Text button in the Paragraph group on the Home tab The text is  With these examples and most alignment, the text is aligned in the element containing the text. Text can be centered in an HTML div and be left-aligned on the rest of the web page. Also, anything contained in the tag containing the CSS justification (e.g., an image) is also aligned.

I recommend you assign your cards a specific height, divide the contents of the card into 3 parts: image / content / button (add to car), assign the following properties to the parent container of these 3 elements:

.card-wrapp {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

and then you would have to assign a specific size to the title, since this can become extremely long, you could add:

.card__title {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Microsoft Office 2010: Illustrated Fundamentals, You can change the alignment, or position of text within a document's margins, using You can also adjust the spacing between lines using the Line Spacing button in the and increase the amount of space both above and below the paragraph. spaced, making it more compact and set off from the other text on the page. This can easily be avoided by setting vertical-align of checkbox or radio button. Just define a class and add it to the checkboxes/radio buttons. This will correctly align them with the labels and also add some margin between the label and the checkbox/radion button but start with a 0 margin and padding for all elements like this:

How to align button to right side of text box in Bootstrap , Bootstrap allows us to align elements by using the utility class float. As we want to align the button to the right side of the text box, we have to use See your article appearing on the GeeksforGeeks main page and help other Please write to us at contribute@geeksforgeeks.org to report any issue with the above content. If the text is in a text box, table, or shape, first click the Text tab at the top of the sidebar, then click the Style button. In the Alignment section, click the alignment buttons you want. To apply these changes to all of the paragraphs in your document that use this paragraph style, click the Update button next to the paragraph style name at the top of the sidebar.

CSS text-align-last property, Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to  On your page, hover your mouse above or below an existing web part and you'll see a line with a circled +, like this: Click + and then choose Text from the list of web parts. Click inside the box and the formatting toolbar will display. Enter your text, and format it using the formatting toolbar.

How To Create a Vertical Button Group, .btn-group button { background-color: #4CAF50; /* Green background */ border: 1px solid green; /* Green border */ color: white; /* White text */ padding: 10px  Bootstrap buttons are no different from any other DOM elements of an HTML document. Aligning them is more likely the same as aligning paragraphs, divs and sections. Here are some of the scenarios that one can encounter. Buttons in ‘container’ class: Buttons in ‘container’ class can be aligned with the ‘text-align’ properties.

Comments
  • Without adding any markup you are decreasing your chances of getting a proper answer.
  • Thank you, I will add that information.
  • Hi, the answer below to change the images to be the same size is the simplest solution on the BigCommerce platform. stackoverflow.com/a/54189553/4017634
  • This unfortunately did not fix the issue, all elements remained in their original positions after setting min-height and height.