How can I ensure the text remains centered within a div, even when there are buttons aligned to the left or

I have a CSS class called .text-align-center that I used to center text.

.text-align-center {
  text-align:center;
}

However, I noticed that when there is a left or right arrow icon within the <div>, the text does not appear perfectly centered.

Is it possible to adjust the centering so that it ignores the arrow icons?

EDIT:

Below is my HTML code where the text is slightly off center due to the presence of an arrow icon:

<ion-view>
  <ion-content class="padding">
    <div ng-click="okDate(unreported)" class="item item-text-wrap item-icon-right text-align-center">
        {{ formattedRecentDate(unreported) }}
        <i class="icon ion-ios-arrow-forward"></i>
    </div>
  </ion-content>
</ion-view>
htmlcss

Answer №1

To optimize your design, consider creating a wrapper for both the left and right arrows. Place the content in a separate div between the arrows and center the text within it.

You can then hide one of the arrows based on your requirements (such as hiding the left arrow on the first page).

Make sure to only hide the arrow itself and not the entire wrapper to maintain proper centering.

Answer №2

Here is an alternative way to achieve the same result:

.exclude-my-width {
    font-size: 15px;
    margin-left: -20px;
    width: 20px;
}

https://example.com/unique-link

Answer №3

Perhaps this method may be suitable for your needs, as it appears to be a straightforward approach if the content remains constant.

To achieve this, specify the width of the element and set the margin to auto.

<div>
   <i class='arrow_icon'></i>Greetings!
</div>

<style>
    div{
        width:100px;
        margin:0px auto;
    }
</style>

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

Issues arise with table-cell and table-row when implementing a navigation bar using the CSS table-layout property

Looking to create a dynamic navigation bar that adjusts to different screen sizes? On the left side, you want an undetermined number of links, while on the right side there should be a search button. The challenge is to ensure that all links have equal wi ...

htmlcss

Ensure that the spinner div is horizontally centered within the side menu, even if a scroll

On my web page, I have a spinner component that can be added to different parts of the page as needed. The spinner is always centered according to its parent, which is in relative position, while the spinner itself is absolute. However, the issue arises wh ...

htmlcss

Using single-line ellipsis with the Material-UI select and option components

I have a TableHead Component with multiple columns. Among them is a <Select> element that allows users to filter the table content based on one of four statuses. I am trying to implement an ellipsis at the end of the option string if it exceeds its c ...

cssreactjsmaterial-ui

Alter the color of the dropdown background when it is changed

Currently, I am utilizing the Semantic UI React CSS library and find myself in need of changing the background color of dropdowns once an option is selected. https://i.sstatic.net/yZBK7.png to https://i.sstatic.net/LxTtT.png <Dropdown placeholder=&apo ...

javascripthtmlcssreactjssemantic-ui-react

Tips for preventing the state of a checkbox from being saved in the browsing history

I have implemented a mobile menu using a checkbox, with the following simplified code: input, ul { display: none; } label { cursor: pointer; } input:checked ~ ul { display: block; } <input type="checkbox" id="toggle-menu" /> <label for="t ...

htmlcss

What is the best method for removing extra spaces from an input field with type "text"?

I have an input field of type "text" and a button that displays the user's input. However, if there are extra spaces in the input, they will also be displayed. How can I remove these extra spaces from the input value? var nameInput = $('#name ...

javascriptjqueryhtml

Custom plugin shortcode HTML appearing within WordPress Edit Page interface

After developing my first WordPress plugin, I encountered a slight issue. Upon activating the plugin, the edit page screen became distorted. Attached is a screenshot for reference. https://i.sstatic.net/wB5aj.png Upon further inspection, it seems that th ...

phphtmlwordpressshortcode

Arranging text in CSS for responsive design

One issue I encountered was setting a division on the webpage. When I try to minimize the browser, the division does not adjust properly to fit the screen: width:1300px; margin:0 auto; height:40px; ...

htmlcss

Various methods for deactivating controls in a CSS class

Is there a way to disable all buttons within a specific class? I have attempted the following code without success: $("input.myClass").attr('disabled', true); This is how I am trying to implement it: <script type="text/javascript> ...

javascriptjquerycsswebforms

Please submit information that is not already filled out in the text fields

I am looking to create a table with text fields and buttons as shown below: <table border="1"> <tr> <td>name</td> <td>id</td> <td>icon</td> <td> </td> & ...

htmldjango

What is the main focus of the active view in MVC2?

So, you can find my website at www.kristianbak.com. I've created a CSS class named activebutton, but I want it to dynamically change when another view is active. Right now, it's statically coded in the HTML (sitemaster). Does anyone have a clev ...

asp.netcssasp.net-mvc-2navigation

What is the best way to add or delete data when specific radio buttons are chosen?

Hey there, I'm facing an issue where the data is being appended regardless of which radio button is selected. Can someone help me with a solution on how to properly add and remove data based on the selected radio button? $( document ).ready(functio ...

javascriptjqueryhtmlswitch-statement

Guide on converting HTML datetime picker datetime-local to moment format

I am looking to convert an input type : <input type="datetime-local" name="sdTime" id="stTimeID" onChange={this.stDateTime} /> into a specific date format: const dateFormat = 'MM/DD/YYYY hh:mm:ss a'; To achieve this, I need to transfer ...

javascripthtmlreactjsdatetimedatetimepicker

What is the procedure to modify a CSS class from the code-behind file?

So I have a CSS style in my .css class where the color is set to blue for hundreds of buttons. But now, my customer wants an option for green buttons which will be saved by a database field. So I check the field like this: if (!String.Is ...

asp.netcss

code, scripting - modal pop-up

My script currently has a popup window using window.open, but most browsers block this type of popups. I now want to change it to another popup that includes a php script, similar to what I've seen on other sites. It seems like they are using ajax. Ca ...

javascripthtmlajaxpopup

What is the best way to inform the user of their login status in Angular?

As a newcomer to angularfire2, I am currently working on implementing authentication and providing the user with feedback on their login status. I am using version angularfire2": "^5.0.0-rc.4. I came across an example on this site, but I am unsure of how i ...

htmlangulartypescriptangularfire2angular-ng-if

Unable to impose a restriction on the number input field limit

My input field has a type of "number" with the min and max attributes applied to limit user input. However, I am facing an issue where users can still enter values beyond the set limit. How can I prevent users from entering values above the specified lim ...

javascripthtmlangulartypescript

Tips for customizing image-cropping functionality within a modal with material UI

When it comes to positioning elements on a basic page using CSS, I consider myself decently skilled. However, things get confusing when working inside a modal. I attempted to use the Dialog component from mui-material to wrap the cropper, but that approac ...

cssreactjsmaterial-ui

Conceal the scrollbar track while displaying the scrollbar thumb

Hey there! I'm looking to customize my scroll bar to have a hidden track like this. Everyone's got their own style, right? ::-webkit-scrollbar{ width: 15px; height: 40px; } ::-webkit-scrollbar-thumb{ background-color: #DBDBDB; borde ...

htmlcssscrollbar

jQuery fails to modify HTML according to its intended purpose

I've been struggling to update a price using JQuery. Even though the code seems fine when I check the console, the HTML doesn't reflect the changes. Additionally, when I try to log console.log(newPrc), it gives an error saying "newPrc" is not def ...

javascriptjqueryhtml