Center alignment in HTML/CSS for text

the issue image

So I want the text [buy] to be centered but when I use text-align: center, it doesn't work. Here is the code:

.buy {
    background-color: rgb(73, 73, 247);
    font-weight: bold;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
    color: white;
    border-radius: 30px;

}
.f {
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
}

.pros {
    font-weight: bold;
    text-align: center;
    font-size: 42px;
    margin-top: 3px;
    margin-bottom: 15px;

}

.mac {
    text-align: center;
    font-weight: bold;
    font-size: 25px;
    margin-top: 5px;
    margin-bottom: 0;
}

.new {
    text-align: center;
    font-weight: bold;
    color: orangered;
    margin-bottom: 0;

}

.p {
    font-family: Arial;
    text-align: center;

}
<p class="new">
    New
</p>
<p class="mac">
    MacBook Pro
</p>
<p class="pros">
    Supercharged for pros.
</p>
<p class="f">
   From $1999 
</p>
<p>
   <span class="buy">Buy</span>
</p>

htmlcss

Answer №1

Ensure your last paragraph has the correct class assigned, and remember to use "text-align:center" for alignment in your paragraph instead of a span. Here is an example of how you can achieve this using HTML and CSS:

   <p class="buy1">
   <span class="buy">Buy</span>
   </p>


    .buy1{
    text-align: center;
     }

Answer №2

If you want to center an inline element like this span, wrap it in a div.

Answer №3

.purchase {
    background-color: rgb(73, 73, 247);
    font-weight: bold;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
    color: white;
    border-radius: 30px;

}
.center-text {
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
}
.highlights {
    font-weight: bold;
    text-align: center;
    font-size: 42px;
    margin-top: 3px;
    margin-bottom: 15px;

}

.features {
    text-align: center;
    font-weight: bold;
    font-size: 25px;
    margin-top: 5px;
    margin-bottom: 0;
}
.special-offer {
    text-align: center;
    font-weight: bold;
    color: orangered;
    margin-bottom: 0;

}
.details{
    font-family: Arial;
    text-align: center;

}
<div class="details">
  <p class="special-offer">
      Special Offer
  </p>
  <p class="features">
      Latest Features
  </p>
  <p class="highlights">
      Unmatched Performance.
  </p>
  <p class="center-text">
     From $1999 
  </p>
  <p>
     <span class="purchase">Buy Now</span>
  </p>
</div>

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

What is the process for attaching an on-click event listener by utilizing an argument that is passed to a function in JavaScript?

These are the functions I have created: function type(message) { document.getElementById("body").innerHTML="<div id=\"textbox\" class=\"textbox\"></div><div id=\"oc\&q ...

javascripthtml

Achieve the same height for an HTML table as its parent div by adjusting the table's height when the div's height is not explicitly defined

I am facing a challenge with an html table placed inside a div. The height of the div is determined by other elements within it. Is there a way to make the table's height match that of its parent div? (setting the table height to 100% is not effecti ...

htmlcss

Utilizing jQuery Validate to individually verify different sections of a form

I am currently exploring how to integrate jQuery validate into my questionnaire form. The form is divided into sections (divs) that are hidden and revealed using jQuery for a cleaner layout. My goal is to validate one section or specific fields at a time b ...

jqueryhtmlcssformsjquery-validate

Slider initialization will commence once the slides have been successfully appended

I've been struggling with a jQuery slider that should load after a series of animations finish. Even though I'm appending slides to the slider and trying to initialize it, the slides end up stacking vertically instead of sliding horizontally. My ...

javascriptjqueryhtmlcss

What is the process of integrating a translator navigational bar into Swiper.js?

After spending 2 days researching, I have been unable to find the information I need on a common feature found in many mobile apps and websites. So, I have decided to seek advice from someone else. The feature I am referring to is a "translator" navigation ...

javascriptjqueryhtmlcssswiper.js

Having difficulty with printing a particular div

I need help with printing a specific div containing checkboxes using jQuery. The checkboxes are initially checked based on data from a database, but when I try to print the div, the checkboxes remain unchecked in the print view. Below is the code snippet ...

javascripthtmlcsscheckboxprinting

React-app size has grown larger post-deployment

I recently created my second app clone using React. I have noticed that after deployment, the size of the app increases. Everything looks normal on localhost:3000, but it significantly grows once deployed. Any assistance in resolving this issue would be gr ...

cssnode.jsreactjsfirebasenpm

What is the best way to specify the CSS :hover state within a jQuery selector?

I am trying to change the background color of a div element when hovered using jQuery, but for some reason the following code is not working as expected: $(".myclass:hover div").css("background-color","red"); Can someone provide guidance on how to achiev ...

javascriptjqueryhtmlcss

Is there a way to identify when a radio button's value has changed without having to submit the form again?

Within this form, I have 2 radio buttons: <form action='' method='post' onsubmit='return checkForm(this, event)'> <input type = 'radio' name='allow' value='allow' checked>Allow ...

javascripthtmlcssradio-buttonforms

Troubleshooting CSS transition issues on ASP.NET Web Forms

Is there a way to make CSS3 transitions work in a .aspx page? I prefer Web Forms for designing forms and any suggestions would be helpful. The following is the code snippet from the .aspx page: <%@ Page Title="" Language="C#" MasterPageFile="~/Sit ...

javascripthtmlcssasp.netcss-transitions

Is it possible to execute an Ajax Request using JQuery?

I've been attempting to update the content within a <div> using a JQuery Ajax Call, but unfortunately I'm encountering some difficulties. Whenever I click on the onclick <a> element, nothing seems to happen. Below is the code that I a ...

javascriptphpjqueryhtmlajax

What are some solutions to resolve the animation issue with CSS dropdown lists?

I am facing an issue with the animation in my dropdown list. The animation is only applying to the text within the ul list instead of the entire list item blocks. Here is how it should function This link contains the incorrect code li:hover > ul.drop ...

jqueryhtmlcsssass

IE11 not running Angular code inline as expected

Currently in the process of developing an AngularJS application, I came across a strange issue that I have never encountered before. It may be a simple fix, but I am unsure of the exact terminology to search for the right solution, so I apologize in advanc ...

htmlcssangularjsinternet-explorer

Zooming on the page causes the absolute HTML layout to fall apart

I am still learning about HTML positioning. My go-to method is absolute positioning, like this: #div { position:absolute; left:50%; top:30%; } However, I have noticed that when I zoom in on the page using Google Chrome, the layout becomes broken. All ele ...

htmlcss

Guide to automatically blur the input field and toggle it upon clicking the checkbox using Angular

<input (click)="check()" class="checkbox" type="checkbox"> <input [(ngModel)]="second_month" value="2019-09" type="month" [class.blurred]="isBlurred">> I need the second input(type=month) field to be initially blurred, and only unblur ...

htmlangulartypescriptblur

Crafting media queries to specifically target Galaxy Nexus and Nexus 7 devices

I am faced with the challenge of testing site design on two different devices: Samsung Galaxy Nexus and Asus Nexus 7 tablet. I am struggling to target these devices individually using media queries, as I am unsure about the appropriate values for max-width ...

cssresponsive-designmobile-websitemedia-queries

Trigger the activation of an input field upon clicking an image labeled "edit"

I am currently developing a website where administrators have access to a dashboard page that displays a list of users. I am looking to implement a feature that allows admins to change the roles of other users directly from the same table row. Below is th ...

javascriptphphtmlaide

Rmarkdown, displaying tables without revealing the underlying latex code in the final output

I've encountered a problem with my rmarkdown code - the table output is not displaying and appears blank. I'm stumped on how to fix this issue. title: "Title" output: html_document: default pdf_document: default header-includes: - & ...

htmlrlatexr-markdownknitr

Excessive White Space and Overflow Issue Specifically on the right side of the Website when viewed on Mobile Devices

I've been troubleshooting a puzzling issue lately. I've been examining various smartphone screen sizes in Chrome Dev Tools' mobile view, and I keep noticing this strange white space on the right side of my page. It's persistent despite ...

htmlcssbootstrap-5.net-6.0

XML integration with Jplayer is not functioning properly

I'm in the process of setting up Jplayer to work with an XML document so that my client can easily update the playlist. I managed to get it working flawlessly when I manually coded the songs into the JS. Here's my current code: <div class="bo ...

javascripthtmlxmljplayer