Steps to include a border around text and center align it:

As a beginner in Html and CSS, I am trying to create a heading with the text "Women safety" and wrap it with a border. However, when I apply the border to the text, it covers the entire width, extending both left and right. I only want the border to be around the text itself while keeping it centered within the container.

Answer №1

Utilizing a span element

HTML

<span>Ensuring Women's Safety</span>

CSS

body {
    text-align: center;
}
span {
    border: solid;
}

Output

https://i.sstatic.net/0gMMV.png

Using div, h1, and p elements

HTML

<h1>Ensuring Women's Safety</h1><br /><br />
<div>Ensuring Women's Safety</div><br /><br />
<p>Ensuring Women's Safety</p><br /><br />

CSS

body {
    text-align: center;
}
h1 {
    border: solid;
    display: inline;
}
div {
    border: solid;
    display: inline;
}
p {
    border: solid;
    display: inline;
}

Output

https://i.sstatic.net/eLVBN.png

Answer №2

Check out the HTML version of your text:

 <p>Protecting Women</p>

To add a border in your CSS, use this code snippet:

p.solid {border-style: solid; display:inline}

Answer №3

<p style="text-align: center;">
    <span style="border: 2px dashed blue;display: inline-block;">Ensuring Women's Safety</span>
</p>

Answer №4

Give this a shot.

#example {
  border: dashed; padding: 1%; display: inline-block;
}
<p id="example">Safety of Women</p>

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

The functionality of ng-click and ng-submit seems to be malfunctioning

I am currently facing an issue with my Angular application and PhoneGap. I have a login form along with a login controller set up, but for some reason, the ng-submit function is not working as expected. When the submit button calls the formConnexion() func ...

What is the best way to confirm if a Json response is empty or not?

{"PatientPastMedicalHistoryGetResult":{"PastMedicalHistory":[]}} The PastMedicalHistory object does not contain any values. How can I verify if it is empty? ...

Is it possible to develop a function that can verify various input values and modify their appearance as needed?

I am currently working on creating a form and faced with the challenge of simplifying my code using a function. Specifically, I want to write JavaScript code that will check all input fields in the form to ensure they are filled. If any field is left emp ...

Exchange the draggable elements between distinct div containers while keeping them in their original positions

Attempting to create an example showcasing Draggable jQuery with Bootstrap, everything is functioning smoothly so far. However, there are two things I am aiming to achieve: Swap the divs <div class='col-sm-12'></div> that were gen ...

What is the best way to thoroughly uninstall Ionic and Cordova from an Ubuntu system?

Is there a way to completely remove Cordova and Ionic 1 and all of their dependencies from my Ubuntu system? And how can I reinstall them again? I found this blog helpful for installing Ionic and its dependencies: I attempted to uninstall Cordova and Ion ...

Tips for designing the microphone appearance on the Google Chrome speech input interface

Google Chrome features an input control for speech recognition. If you want to know how to use it, check out this link. I'm looking to enlarge the microphone icon and possibly use a customized image for it. Increasing the width and height of the inp ...

Creating custom shaders in three.js that can receive shadows involves a few key steps. Let

For more information, you can visit the original post here. The task at hand seems to be quite complex due to the lack of documentation and examples on this specific topic on the three.js website. Currently, I am able to render the correct image and, with ...

How to maintain the previous position of Rzslider in Angular Js after selecting the date?

I am currently utilizing RZslider for date and time picking, but I am encountering repeated issues. As a newcomer to Rzlider and angularJs, I am struggling with some aspects. The slider is set to display the current time plus 4 hours and minus 4 hours. For ...

Tips for positioning input fields and labels in both horizontal and vertical alignment

Below is the HTML code, and I want the tags to look like this: label1: input1 label2: input2 label3: input3 Instead, it currently looks like this: label1: input1 How can I modify the HTML to achieve the desired format? HTML: <div class=" ...

Ways to create a rounded pane for Highchart's Solidgauge

I've noticed that my arcs have rounded edges, but the pane is flat. Is there a way to make the pane rounded as well? I am currently using Highcharts v9.1.2. I tried using "stroke-linejoin: "round"", but it didn't work. https://i.sstati ...

Tips on how to display HTML tags in Blade templates

I am struggling to figure out how to include HTML tags in my Blade template in Laravel. It was straightforward in plain PHP, but I am finding it confusing in the context of Laravel. Delete Order by client: {{strtolower($name) . &ap ...

Dividing a sentence by spaces to isolate individual words

Recently, I encountered a challenging question that has me stuck. I am working on creating an HTML text box where the submitted text is processed by a function to check for any links. If a link is detected, it should be wrapped in anchor tags to make it cl ...

Only add table heading if there is available space, but refrain from doing so if it will disrupt the layout

My current challenge involves a table where I have successfully used white-space nowrap to prevent the heading text from wrapping. The issue arises when viewing the layout on smaller screen widths, as this nowrap setting causes the table to expand beyond ...

Adjusting the width of a div element using a button

I am currently diving into the world of JavaScript, React, and Node.js. My current challenge involves attempting to adjust the width of a div element using a button. However, I keep encountering the same frustrating error message stating "Cannot read prope ...

bespoke JavaScript confirmation dialogue box

After customizing a confirmation box for the logout feature, I encountered an issue. When the user presses cancel, the box closes and control remains on the same page as expected. However, when the user clicks yes to logout, nothing happens. Could anyone p ...

Display a collection of pictures from a directory on a website using JavaScript

I am having trouble displaying a collection of images from a specific folder using JavaScript/jQuery. Below is the code snippet I am working with: $(document).ready(function(){ var dir = "images/"; // specified folder location var fileextension ...

Angular-Phonegap - The issue with "min-height: 100%" not functioning properly

I am faced with this specific HTML file: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <!-- NOTE: Make sure to remove the width=d ...

Decrease in font size observed after implementing Bootstrap 5

The issue arises when I include the Boostrap CDN link, resulting in a change in font size. I discovered that Bootstrap has a default font size, which is why attempts to adjust it using an external style sheet with !important do not succeed. Interestingly, ...

Adding the BETA symbol to your Bootstrap navbar is simple and can be done by

Is there a way to include a "BETA" symbol at the top of the "Brand Name" on my Navbar, similar to the "TM" symbol? How can this be achieved? ...

What is the best way to identify the appropriate class name for searching in Selenium?

I'm currently on a mission to find an element based on its class name. I have extracted this snippet from the page source (which I saved as a file using BeautifulSoup): <div class="flex flex-column"><div... If I attempt to pinpoin ...