The alignment issue persists in HTML/CSS despite troubleshooting efforts

I am facing a challenge while attempting to center text within a modal window, despite my efforts the text remains uncentered.

This is my HTML code:

<div ng-init="modalCompassDir()">
    <div class="myModal">
        <img class='floorImage' src={{items}}/>
        <div class="stickFigureDiv">
            <img class="stickFigure" style="height:30px; width:30px;" src="NavAppPics/stick_figure.gif"/>
            <img class="directionArrow" degrees='angle' rotate src='NavAppPics/transparentArrow.png' style="height:28px; width:25px;"  />
        </div>
    </div>

    <a class="address">{{address}}</a>

</div>

Here is my CSS code:

.myModal{
    position:relative;
    display: block;
/*    height:300px;*/
    width:100%;
    text-align:center;
}

.address{
    font-size:1.5em;
    text-align: center;
/*    margin-left:10%;*/

}

I cannot seem to understand why the text-align property in my CSS code is not functioning as expected, I have referred to this example for guidance: http://www.w3schools.com/cssref/pr_text_text-align.asp

Edit: I mistakenly left one of the text-align properties set to 'center', I was experimenting with different options before reverting it back

javascripthtmlcss

Answer №1

To ensure your a element behaves correctly, remember to include the CSS property display: block. By default, a elements are considered inline, which means their width is determined by the content they contain. This can cause issues with properties like text-align, as they may not work as expected unless set within the container.

.address{
    font-size:1.5em;
    text-align: center;
    display: block;
}

Check out this example on Fiddle

Answer №2

<div ng-init="modalCompassDir()">
    <div class="myModal">
        <img class='floorImage' src={{items}}/>
        <div class="stickFigureDiv">
            <img class="stickFigure" style="height:30px; width:30px;" src="NavAppPics/stick_figure.gif"/>
            <img class="directionArrow" degrees='angle' rotate src='NavAppPics/transparentArrow.png' style="height:28px; width:25px;"  />
            <a class="address">{{address}}</a>
        </div>
    </div>

put .address inside .myModal

Answer №3

To center your .address link within .myModal, you can either place the link inside .myModal or add a class to the parent div and apply text align center on that class:

HTML 

<div ng-init="modalCompassDir()" class='custom_class'>
    <div class="myModal">
        <img class='floorImage' src={{items}}/>
        <div class="stickFigureDiv">
            <img class="stickFigure" style="height:30px; width:30px;" src="NavAppPics/stick_figure.gif"/>
            <img class="directionArrow" degrees='angle' rotate src='NavAppPics/transparentArrow.png' style="height:28px; width:25px;"  />
        </div>
    </div>

    <a class="address">{{address}}</a>

</div>

CSS

.myModal{
    position:relative;
    display: block;
    width:100%;
    text-align:center;
}

.address{
    font-size:1.5em;
    text-align: right;
}
.custom_class{
  text-align:center;
}

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

Can a hyperlink be generated by simply inputting the URL once?

As I add numerous links to my website, I can't help but feel like a novice using the <a href>. I want users to see the URL of each link immediately without needing to hover over it first. Right now, I am structuring my links like this: <a h ...

htmlcss

numerous inquiries regarding my CSS header navigation bars

As someone who is new to CSS, I find myself struggling to grasp the correct approach. Online examples vary and leave me confused. Specifically, I have questions about my markup but overall, am I doing things correctly? I feel like my CSS code is bloated. ...

htmlcsscss-floatoverflow

Guide to center align fields in Ionic and Angular

I am working on creating a login screen that resembles the image provided. I have managed to set the background image, input fields, and buttons successfully. However, I am encountering a few issues: The width of my input field is taking up the entire spa ...

javascriptangularjscssionic-framework

Guide for animating individual mapped elements in react-native?

After mapping an object array to create tag elements with details, I added an animation for the tags to zoom in on render. However, I wanted to take it further and animate each tag individually, sequentially one after the other. This appears to be a common ...

javascriptreactjsreact-nativereact-animated

Steer clear of utilizing CSS pseudo-elements like :before and :after

I am seeking a solution to hide a <label> when viewing on a small mobile device. Below is the HTML code: <label class="page_createpassword_label" for="page_createpassword"> <span class="page_label_main">Span Text</span> <span c ...

csscss-positionpseudo-element

Create a function to produce a list of dates within two specified date ranges using JavaScript

Looking for assistance as a beginner in JavaScript. Can anyone guide me on how to generate a list of dates between dateA and dateB? For instance: dateA = 07/01/2013 dateB = 07/01/2014 Desired outcome: 07/01/2013, 07/02/2013, 07/03/2013, 07/04/2013...a ...

javascriptjquerydatedatepickerrange

Angular firing a function in the then clause before the initial function is executed

I have a situation where I need to make multiple service calls simultaneously, but there is one call that must be completed before the others are triggered. I have set it up so that the other calls should only happen after the .then(function() {}) block of ...

javascriptangularjstypescriptangular-promise

How can I access the feed of a single user using the Facebook API

I have yet to experience working with Facebook APIs, but I am interested in developing a basic app that will display posts from a specific Facebook user. I would prefer not to enable login for multiple users, just keep it simple. My goal is to create an a ...

javascriptruby-on-railsnode.jsfacebookfacebook-graph-api

Optimal method for creating a seamless loop of animated elements passing through the viewport

My challenge involves managing a dynamic set of elements arranged next to each other in a row. I envision them moving in an infinite loop across the screen, transitioning seamlessly from one side to the other, as illustrated here: https://i.stack.imgur.com ...

javascriptcssanimationgraphicsgsap

Extend GridView cell for file preview and download

Within my gridview, there is a column labeled "File Name" which includes the names of various files. I am looking for a way to click on a specific file name and be able to view its content as well as save or download the file. I am open to all suggestions ...

c#javascriptasp.netajaxgridview

Injecting Variables Into User-Defined Button

Presenting a custom button with the following code snippet: export default function CustomButton(isValid: any, email: any) { return ( <Button type="submit" disabled={!isValid || !email} style={{ ...

javascriptreactjstypescriptbuttonmaterial-ui

Missing 'id' property in ngFor loop for object type

I'm currently learning Angular and I've been following a code tutorial. However, despite matching the instructor's code, it doesn't seem to be working for me. When I try to compile the following code, I receive an error message stating ...

htmlangularngfor

Utilize useEffect to track a single property that relies on the values of several other properties

Below is a snippet of code: const MyComponent: React.FC<MyComponentProps> = ({ trackMyChanges, iChangeEverySecond }) => { // React Hook useEffect has missing dependencies: 'iChangeEverySecond' useEffect(() => { ...

javascriptreactjstypescriptreact-hooks

The task of renaming a file in javascript when it already exists by incrementing its name like file_1.txt, file_2.txt, and so on is proving to be

After trying out this code snippet, I noticed that it creates a file like file.txt as file_1.txt. However, when I try to use the same filename again, it still shows up as file_1.txt instead of incrementing the number. Is there a way to automatically incr ...

javascriptnode.jsexpressbackend

Tips for implementing arraybuffer playback in video tags

I have been exploring ways to convert images from an HTML canvas into a video. After much research, I just want to be able to select a few images and turn them into a video. By passing multiple images to a library engine, I am able to receive an array buff ...

javascripthtmlarraybuffer

What is the best method for placing text over an image in Dreamweaver?

What steps should I take to overlay text on an image using Dreamweaver? Similar to the example linked below: https://i.stack.imgur.com/8GvkW.png Below is a snippet of my code: HTML <body> <main> <header> <img src="images/headerimag ...

htmlcssimagedreamweaver

What possible reason is causing ag grid to overlook the defaultExcelExportParams option that was provided?

Here is my React ag grid code snippet. I'm trying to implement the processCellCallback function, but unfortunately, I am not seeing the console.log output in the browser console when exporting excel. Any suggestions on what might be causing this issue ...

javascriptreactjsexcelag-grid

Having troubles with delayed state changes due to setState being used within useEffect

I have been working on a slider effect using React Hooks and Redux, and here is the code I am using: const Barchart = ({chartData}) => { let newArray = [] let len = chartData.length const [XArray,setXArray]=useState([chartData]) const [ ...

javascriptreactjsreduxreact-hooks

Changing a button to text with PHP upon clicking

I am looking to create a button that, upon being clicked, will show a simple "X" on the website in the same location as the button itself. Essentially, the button will vanish and be replaced by an "X". The current code for my button is straightforward: &l ...

phphtmlbuttononclick

Highcharts: Including plotlines in the legend

I need to include a plotline in the legend. Check out my example here. $('#container').highcharts({ xAxis: { tickInterval: 24 * 3600 * 1000, // one day type: 'datetime' }, yAxis: { plotLines: ...

javascripthighcharts