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

What is the fewest amount of commands needed to generate a client-side Javascript code that is ready for use?

In the realm of JavaScript libraries found on Github, it has become increasingly challenging to integrate them directly into client-side projects with a simple script tag: <script src="thelibrary.js"></script> The issue arises from the browse ...

javascriptnode.jsnpmwebpack

Using Javascript to dynamically swap images within a div as the user scrolls

Can someone help me achieve a similar image scrolling effect like the one on the left side of this website: I am looking to change the image inside a div as I scroll and ensure that the page doesn't scroll further until all the images have been scrol ...

javascripthtmlcss

Unable to import local npm package due to an error

We are in the process of migrating multiple websites, each with its own project, to Vue.js. As we transfer files over and bundle them using Webpack, we have encountered a need to consolidate similar components and core JavaScript files into a shared librar ...

javascriptnpmwebpackvue.js

Converting the length attribute of a table to a string does not yield any

After grappling with this bug for some time now, I've come up empty-handed in my search for a solution online. Expected Outcome: Upon pressing the create row button, I anticipate a new row being added at the bottom of the table. This row should cons ...

javascripthtmlhtml-table

What is preventing d3.json from including cookies in the request?

I'm delving into the world of ajax requests with d3.js (v5) and I'm facing a little hiccup. Here's my code snippet: d3.json(uri).then(data =>console.log(data)); When I tried this in an app utilizing cookie authentication, I consistently ...

javascriptjsonajaxd3.jscookies

An image inside this stylishly framed photo with rounded corners

.a { clip-path: polygon(10% 0, 100% 0%, 100% 100%, 10% 100%,10% 60%, 0% 50%, 10% 40%); } .a { position: relative; width: 500px; height: 500px; background:url("https://cdn.pixabay.com/photo/2020/02/16/07/55/thailand-4852830_960_720.jpg"); border-radi ...

htmlcss

Is it necessary to include @types/ before each dependency in react native?

I am interested in converting my current react native application to use typescript. The instructions mention uninstalling existing dependencies and adding new ones, like so: yarn add --dev @types/jest @types/react @types/react-native @types/react-test- ...

javascriptnode.jstypescriptreact-native

The hover effect does not function on an SVG element when it is placed within an external file

I've been experimenting with SVG animation. My goal is to change the color of a circle when it's hovered over. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 437 ...

csssvgsvg-animate

Hey there, I was wondering if it's possible to modify the color of the navbar when scrolling on a specific page

After the first 3 pages with a black background and a transparent navbar with white navigation items, I encounter visibility issues when scrolling to the colorful 4th page. Is there a way to change the navbar color on this specific page using ONLY HTML a ...

htmlcsscolorsresponsive-designnavbar

Ways to apply a box shadow exclusively to specific elements

Is there a way to apply a box-shadow to a div without it affecting specific other divs? In simpler terms, is it possible to prevent shadows from being cast on a particular div? Take for example this scenario: http://jsfiddle.net/Cd6fE/ How can I prevent ...

jquerycss

The content spills out of the container

I'm currently working with a div that displays scrolling text when it overflows. I am wondering if there is a way to hide the scroll bars until the text actually overflows? Additionally, is there a method to make the overflow occur only vertically and ...

jqueryhtmlcss

How to retrieve the third party child component within a Vue parent component

Within my example-component, I have integrated a third-party media upload child component called media-uploader: <example-component> <form :action= "something"> // Other input types <media-upload :ref="'cover_up ...

javascriptvue.jslaravel-5vuejs2vue-component

Looking to show an image when a checkbox is ticked and hide it when it is unticked in HTML?

How do I make a specific image appear when a user clicks on a checkbox? I'm unsure if I should use jQuery, Ajax, or another method. What is the best approach for this task? Your assistance would be greatly appreciated. I have successfully created the ...

javascriptjqueryajaxhtml

The TouchableOpacity function is triggered every time I press on the Textinput

Every time I press on a text input field, the login function is called This is the touchable statement: <TouchableOpacity style={InputFieldStyle.submitButton} onPress={this.login(this.state.email, this.state.password)}> <Text ...

javascriptajaxreact-nativeinput

Simple server using node.js and express to host an HTML file and associated resources

I am currently experimenting with frontend development and need a basic web server to quickly start projects and serve files. Specifically, I have one index.html file along with some css/js/img files. I decided to work with Node.js and Express for this pur ...

javascriptnode.jsexpress

Building conditionals in AngularJS expressions using if-then-else syntax

Is there a way to incorporate the ternary-operator (if-then-else construction) in an angularjs expression? For example, I have a function $scope.isExists(item) that should return a boolean value. I would like to do something like this: <div ng-repeater ...

javascriptangularjsif-statementangularjs-ng-repeatternary-operator

Can a phone without GPS capability still perform geocoding functions?

Is it possible to obtain the location through visiting a website? I am aware that HTML5 allows for this, but will it be compatible with mobile phones? ...

htmlgeocoding

Learn the step-by-step guide on integrating Angular 2 into Codeigniter 3

Currently, I am using Codeigniter 3x and have been using and learning it for a month. Now, I want to start learning a JavaScript framework like Angular, but I'm not sure how to install or use Angular in Codeigniter. Can anyone guide me on this? Is it ...

javascriptphpangularjscodeigniter

Unable to import global CSS in React; however, local components are working fine

My React application is having trouble loading global CSS styles. While local components are able to access their own styled-components, the global CSS styles are not being applied across all components. I have tried various import paths and different file ...

cssreactjs

Accordion featuring collapsible sections

Looking to build an accordion box using Javascript and CSS. The expanded section should have a clickable link that allows it to expand even further without any need for a vertical scroll bar. Any ideas on how this can be achieved? Thank you ...

javascripthtmlcss