Place the blockquote in the middle, but maintain the text's alignment to

I recently designed a webpage using Bootstrap and CSS. My main goal is to have my two blockquotes centered on the page while keeping the text left-aligned (which is the default behavior for the selected classes in Bootstrap).

To see the full code, take a look at it on CodePen.

Here is an example of the HTML code for one of the blockquotes:

  <blockquote>
  <p>A wise man proportions his belief to the evidence.</p>
  <footer class="blockquote-footer"><cite>David Hume</cite></footer>
  </blockquote>

Below is the CSS code I used to style my blockquotes:

blockquote {
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  width: 500px;
  margin: 3em 0;
  padding: 0.35em 40px;
  line-height: 1.45;
  position: relative;
  color: #383838;
}

blockquote:before {
  display: block;
  padding-left: 10px;
  content: "\201C";
  font-size: 80px;
  /* An element with position: absolute; is positioned relative to the nearest positioned ancestor, which is probably the blockquote */
  position: absolute;
  /* Offsets from the edges of element's containing block, ancestor to which the element is relatively positioned */
  left: -20px; /* Negative moves it left */
  top: -20px; /* Negative moves it toward the top */
  color: #7a7a7a;
}

blockquote cite {
  color: #999;
  font-size: 14px;
  margin-top: 5px;
}

Answer №1

To center the blockquote horizontally since you have specified a width, you can utilize auto margins.

Here is the revised CSS*:

blockquote {
  margin: 3em auto !important;
}

codepen with updates

*Please note that the Bootstrap framework is currently overriding your CSS. To address this, you can use !important

Answer №2

To achieve a centered margin, consider adding "auto" to the margin attribute in your CSS code snippet.

blockquote {
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  width: 500px;
  margin: 3em auto;
  padding: 0.35em 40px;
  line-height: 1.45;
  position: relative;
  color: #383838;
}

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

Make the text in the SCSS file placeholder bold

Within my Angular front end application, there is a form containing a textarea: <mat-form-field class="full-width"> <textarea class="left-aligned" formcontrolname="x1" matInput placeholder="some text"/> </mat-form-field> In the co ...

Ways to assign dynamic widths to inner divs within a parent div automatically

I am working with divs <div id='top' > <div id='top-border' > </div> <div id='top-menu' > <jdoc:include type="modules" name="top-menu" style="well" /></div> </div> and adjust ...

The iframe is not adjusting its size in relation to the parent window

For more information, click here: http://jsfiddle.net/5HYve/ <div style="position: fixed; top:0; right:0; width:300px; height: 100%; text-align:justify; overflow:hidden;" class="chat-container"> <iframe id="chat_1" style="width:300px;height:1 ...

Issue with toggleClass functionality (potential coding glitch)

I am attempting to display my div once the button is clicked. Below is the code snippet: <div class="post-menu"> <button class="button"> <i class="uil uil-ellipsis-h"></i> </button> ...

Is it possible to develop Hybrid Apps specifically for Windows Tablets/Surface devices?

We have created a Hybrid App for Android devices and made it compatible with Windows by using Adobe PhoneGap Build to generate a .XAP package from the existing Source Code. We believe that this .XAP package can easily be deployed on a Windows Mobile devic ...

Issue with displaying Bootstrap 3 modal on Mozilla browser

Hello everyone, I've encountered an issue with my Bootstrap modal on Mozilla browser. Everything works perfectly on Chrome and Safari, but when I click the modal button in Mozilla, nothing happens. Here's a snippet of my code: <button type="b ...

Prevent the line from crossing over the circle in CSS

How can I prevent the line from intersecting the circle? I want the line to be outside the circle. The background (in this case, of the li tag) will be transparent. #project-wrapper { width: 100%; /* Adjusting the position of the element on the pa ...

Tips for extracting a substring from a Django variable [HTML]

I am struggling to properly format an img element with a src attribute. The URL example I am working with is , where the number 45 represents the first two characters of the full item.image attribute. My trouble lies in extracting the {{item.image[0,2]}} ...

Exploring WordPress's Query Page with Posts

My current code successfully pulls posts from a specified category, but I am struggling to also include pages in the output. I have tried various methods, but haven't been able to pull in both posts and pages at the same time. HTML/PHP <?php quer ...

The HTML footer designed with bootstrap is not behaving as expected. It is not staying fixed at the bottom of the page and is not displaying at full width despite my coding efforts

Working on a small Sinatra app with bootstrap for layout, I'm encountering some issues. The layout is not sticking to the bottom and not displaying at 100% width as intended. Additionally, the footer text is not centering even after applying the text ...

Why do style assignments lose their motion when executed right after being made?

If you take a look at this specific fiddle in Webkit, you will see exactly what I am referring to. Is there a way to define the style of an element when it is first specified, and then its final state? I would like to be able to fully define a single-ste ...

Utilizing the Grid-A-Licious plugin multiple times within a single webpage

Currently, I am utilizing the Grid-A-Licious plugin for my project. It functions perfectly when used on a single page with one call to the plugin. However, due to my design requirements, I need to implement it within 3 tabs on the same page. Unfortunately, ...

JS script for clicking various icons on a webpage that trigger the opening of new tabs

I am working on a webpage where I have 9 icons with the same class. I am trying to write JavaScript code that will automatically open all 9 icons when the webpage loads. I tried using the code below, but it only clicks on the first icon and stops. let ...

What is the method to restrict the selection of only one option for specific values in a multiple-selection dropdown menu?

Is there a way to create a dropdown menu with the following functionalities: I want to allow multiple selections for options A, B, and C, but disable multiple selection if option D is selected. Any tips on how to achieve this? Thank you. <label>Ch ...

Initiate activity when link is clicked

I am currently in the process of developing a website that includes 5 divs. <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> <div class="five"></div ...

Error encountered in jQuery 3.3.1: Unable to append a row to the tbody of a table

As I attempt to dynamically insert a row into an HTML table when a click event occurs using JQuery 3.3.1 and Bootstrap 4, I encounter a slight issue. HTML: <table id='tblAddedCallsign' class='table table-striped'> </table> ...

Verify whether the labels are blank, remain as they are, or transfer the data to the database

Currently, I am utilizing PHP, HTML5, and JavaScript for my project. The task at hand involves creating a webpage that will be connected to a database. However, I have encountered an issue wherein the page proceeds to the next step and sends data even when ...

Mobile device causing issues with sticky footer functionality

Can anyone help me troubleshoot an issue with my sticky/floating bottom footer on a calorie calculator? It works fine on desktop but not on mobile. Any ideas what might be causing the problem? HTML: <footer class="footer"> <div class="summar ...

Adding a div to a different webpage using jQuery

I am currently working on a small admin panel and I was curious if it is feasible to use jQuery to add a div box inside the index.php file after clicking a button in the panel? If this is possible, an example demonstrating how to do so would be greatly ap ...

Ways to reduce the width of a flex box

I am facing an issue with my main container where I have two items placed on the same line. Item 1 is an image linked to a URL and it should be positioned at the far left of the container. On the other hand, item 2 contains a font awesome icon that needs t ...