Align text in the center of divs

I've been working with the code below: https://jsfiddle.net/5uoz3mqz/1/

.triangle {
  text-align: center;
  width: 100%;
  height: 0px;
  border-style: inset;
  border-width: 0 300px 300px 0;
  border-color: transparent #f08326 transparent transparent;
  position: absolute;
}

.page-title {
  position: relative;
  text-align: center;
  font-family: "bebas";
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  padding: 5px;
  background-color: rgba(15, 138, 199, 0.87);
  border: 0.1em solid rgba(4, 79, 102, 0.22);
  width: 130px;
}
<div class="triangle">
  <div class="page-title">White Labs</div>
  <p>Some text here to make dasssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
</div>

Is there a way to center both the title box and the text on top of the triangle div? I want the triangle to remain on the side while having the title box and centered text above it.

Thanks,

Answer №1

Simply add margin: 0pc auto; to the .page-title class
to see the updated fiddle demo, please click here

.page-title {
  position: relative;
  text-align: center;
  font-family: "bebas";
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  padding: 5px;
  background-color: rgba(15, 138, 199, 0.87);
  border: 0.1em solid rgba(4, 79, 102, 0.22);
  width: 130px;
  margin:0px auto;
}

Alternatively, you can use a pseudo element instead of a triangle border, like so:
the revised code is provided below:

.triangle {
    text-align: center;
    width: 300px;
    height: 300px;
    position: absolute;
    overflow: hidden;
}
.triangle:before {
  content:'';
  position:absolute;
  right:-423px;
  top:-300px;
  background:rgba(240,131,38,0.50);
  width:600px;
  height:600px;
  transform: rotate(45deg);
  z-index:0;
}
.page-title {
  position: relative;
  text-align: center;
  font-family: "bebas";
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  padding: 5px;
  background-color: rgba(15, 138, 199, 0.87);
  border: 0.1em solid rgba(4, 79, 102, 0.22);
  width: 130px;
  margin:0px auto;
}
.triangle p {
  position: relative;
}

To view the fiddle link, please click here

Answer №2

To center align the page title in CSS, just include the "margin: 0 auto;" property in the `.page-title` class.

This simple addition will reset all margins and automatically set the title to the center of the page.

Answer №3

The issue arises with the main div container having a width of 0, as it requires some width for the child container to position/float to the center. I have made adjustments to the div structure, and you can find the solution here: https://jsfiddle.net/u1Lsux7n/1/. Additionally, in cases where there is long text like 'dssssss.......' as shown in your example, you will need to use 'overflow' CSS to ensure the text is center-aligned.

One approach is to set the main triangle container width to 90% initially and then adjust the child containers' widths accordingly.

.triangle {
    text-align: center;
    width: 0px;
    height: 0px;
    border-style: inset;
    border-width: 0 300px 300px 0;
    border-color: transparent #f08326 transparent transparent;
    position: absolute;
}

.page-title {
    position: relative;
    text-align: center;
    font-family: "bebas";
    font-size: 30px;
    color: #fff; 
    text-transform: uppercase;
    padding: 5px; 
    background-color: rgba(15, 138, 199, 0.87); 
    border: 0.1em solid rgba(4, 79, 102, 0.22); 
    width: 130px; 
    margin:0 auto;
 }

 .triangle-container {
      width: 300px;
      height: 300px;
      float: left;
 }

 .page-contents {
      float: left;
 }

<div class="triangle">  
    <div class="triangle-container"> 
        <div class="page-title">Tile</div>
        <div class="page-contents">
            <p>Some text here to make dasssssssssssssssssssss ssssssssssssssssssssssssssssssssss</p>
        </div>          
    </div>
</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

How to create a thumbnail hover effect with CSS3 and javascript, overcoming the z-axis issue

Currently, I am working on creating a set of thumbnails that enlarge when hovered over. The initial setup achieves the zoom effect using CSS3 transform:scale and ease-in-out. However, the issue is that the enlarged images overlap each other due to sharing ...

How to Customize the Label Position of Material UI TextField

Is there a way to customize the positioning of the label in MUI TextField so that it appears above the border instead of on top of it? I know that using InputLabelProps={{ shrink: true }} will keep the label on top, but the default style is not what I&apos ...

Can multiple HTML files be utilized in one Shiny App?

For my Shiny App, I've been experimenting with building the entire UI using HTML. However, I'm encountering an issue where I am unable to add a navbar that can navigate to multiple HTML files. The reference I have been following is: Below are t ...

Delay the rendering of the MUI DataGrid column until after the DataGrid is visible on the screen

Would it be feasible to asynchronously load a column of data in the MUI DataGrid after the table is displayed on the screen? Retrieving this additional data from the database is time-consuming, so I aim to have it appear once the table has fully loaded. T ...

Comparing passwords in Twitter Bootstrap for validation purposes

After creating a simple form with Twitter Bootstrap, I managed to incorporate some validation as well. <form class="form-signin"> <input type="email" class="input-block-level" placeholder="Email address" required=""> <input type ...

Display all pages in the DataTables plugin while utilizing responsive tables and additional features

I am struggling to combine the responsive and fixed header attributes of my current function with the "Show All" list feature, similar to what is demonstrated in this example: https://datatables.net/examples/advanced_init/length_menu.html I need assistanc ...

Utilizing jQuery fadein effect to reveal a set of links upon the page's initial load

Is it possible to utilize jQuery to smoothly fade in the links within a navigation div when the page loads? Currently, the links are styled with an a tag and have individual IDs. #navtop a {etc.} Do I need to convert them to a class, add another class to ...

Unable to load custom fonts

I've been attempting to upload Gotham fonts onto a website I'm constructing, but unfortunately, it doesn't seem to be working. Despite my efforts to troubleshoot by searching through various resources, including Google, the issue persists. I ...

What is the best way to evenly distribute input elements horizontally within the parent container?

I am working on a layout with five select inputs that I want to arrange horizontally within the parent div. However, the current code setup is not achieving the desired layout: <div id="divtable"> <select class="abc"></select> ...

Using AJAX to dynamically update a DIV when there are changes in the XML data

After dedicating the past four years to solving this problem intermittently, my brain is feeling the strain. I serve as a volunteer designer for a local community project involving a radio station. Our "On Air" module showcases the current and upcoming tr ...

Generate random DOM element exchange (without using jQuery)

My JavaScript code is designed to randomly swap HTML elements like images or paragraphs. The swapping of positions is working, but I've encountered a strange bug that I can't seem to explain. In the example HTML provided, there are only 2 paragra ...

Layering Image Divs in Bootstrap 5 for a Dynamic Responsive Layout

My current project involves working with a Bootstrap 5 template that includes a carousel within a card body. This design is responsive and functions correctly across desktop, tablet, and PC viewports. However, I now need to overlay and stack multiple divs ...

The functionality of Events javascript seizes to work once new content is loaded into a div through Ajax

On my website, I have a table where clicking on the first checkbox automatically selects all others and triggers additional actions. The data is loaded directly onto the page using PHP when the site opens. View image here Above the table is a 'selec ...

Issue with automatic completion for classes and IDs in Visual Studio Code

Auto completion does not seem to work when I attempt to use a previously written class or ID in my HTML file. It doesn't function in the same HTML file, CSS file, or JS file. While ctrl + space works for some classes within the same HTML file, it is n ...

Tips for preventing the bootstrap modal from disappearing during auto postback in asp.net

I am currently using vb.net in my asp.net project along with Bootstrap 4. Within a modal, I have two dropdown lists. The goal is for the second list to be sorted based on the user's selection from the first list. However, I encountered an issue where ...

Methods for presenting a list of textboxes representing a price list when a checkbox is clicked using CSS

When updating the supplier and store, the item list dynamically populates. When a user clicks on an item they want to order, how can I display the quantity textbox to the left of the checkbox using CSS? Below is the code snippet for items and ordered quan ...

Issues with Google Fonts displaying poorly on Chrome

While working on my project, I've encountered an issue with the rendering of Source Sans Pro from Google Fonts in Chrome. Sometimes the font completely breaks, and unfortunately, I haven't been able to pinpoint when or why this occurs. At times, ...

Unable to maintain the height of a div at 100% as it keeps reverting back to 0px

I'm having trouble setting the height of the individual parent columns (and their children) to 100% because for some reason, the div height keeps resetting to 0. The first column contains two child boxes that should each take up 50% of the page heigh ...

Converting HTML code into an image using Python

Is there a way to convert the HTML below into a PNG image using Python? <html> <b>Bold text</b> </html> This snippet of HTML is just for demonstration purposes. I've attempted using 'pisa', but it only converts ...

Manipulating the arrangement and alignment of div elements within a designated container

Here is the markup I am working with: <div class="container"> <div class="left-rect"></div> <div class="text">Lorem ispum</div> <div class="right-rect"></div> </div> .left-rect, .right-rect { ...