My main div on the page has the attribute align="center", but it does not seem to align in the center.
If you'd like to see the page for reference, click here.
This is the CSS:
#page{
background-color: #4C1B1B;
width:85%;
height:500px;
}
And here is the HTML:
<body>
<div id="page" align="center">
<div id="pageleft">
TEST
</div>
<div id="pageright">
</div>
</div>
</body>
Thank you in advance!
Update the styling of #page by adding margin:auto and removing align="center"
#page{
background-color: #4C1B1B;
width:85%;
height:500px;
margin:auto;
}
If you want to perfectly center align the div, you can use this simple formula:
left = (100 - width of the div) / 2
You can achieve this using JQuery like so:
var left = (100 - 85) / 2;
$("#page").css("left", left + "%");
In my HTML file, I have the following code snippet: <tr *ngFor="let package of packages"> <td *ngFor="let coverage of coverages"> <input type="hidden" #dynamicID [value]="coverage.id"> <-- Include an identifier with the vari ...
Hey there, I'm a newbie on this forum and could really use your expertise. I've put together an html5 page with Google maps using the API key from Google (My code is shown below), it's working fine with a central marker in place and loads pe ...
A graphic designer has provided us with an image featuring three selection boxes. I implemented the necessary HTML elements and CSS to display three overlapped selection boxes on top of the image, using pixel values for positioning. However, the original ...
How do I customize the appearance of my v-list-item-group when it is in the active state? <v-list> <v-list-item-group v-model="day" color="green"> <v-list-item v-for="(item, i) in items" :key="i"> <v-list-item-content& ...
Below is the XML file I am working with: <data> <temp>21</temp> <humidity>17</humidity> <analog>670</analog> <analog>908</analog> <analog>628</analog> <analog>909</analog> <L ...
Currently, I'm working on the Interactive website: Push menu training exercise on codecademy. However, I am a bit confused about jquery selectors. Specifically, in the example provided below, why does the 'menu' html element require a ' ...
Firefox seems to handle the following code without any issues: < div style="position:absolute;top:0px;margin-top:60px;bottom:0px;width:100%"> < div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width:100%;height:100%"> {% for row ...
Hello everyone, I need some assistance with creating a contact form. This is my first time working on this, and I am facing an issue. I am using HTML5, which I have some knowledge of, and PHP, which I am not very familiar with. When I try to test the form ...
My challenge involves managing two collapsible cards on a webpage. I am looking for a solution where the .card-body will have its display set to none when there are no inner divs to show in the card upon clicking a letter in the pagination. Otherwise, the ...
Upon initial load of my website, if the page is maximized or in fullscreen mode, the comBrand div will have specific CSS properties applied. However, during a resize event, I use the .css() function to adjust the properties of this element so it doesn&apos ...
I am seeking the ability to implement a dropdown through CSS in various locations within my HTML prototype. This implies that I require the capability to position multiple dropdowns anywhere on the page. Currently, I utilize this method to generate a sing ...
Currently, I am utilizing jQuery's resizable() function. My goal is to have one div positioned on the top-right corner and another div on the bottom-left corner at all times. Essentially, I want these two divs to act as if they were the resizable hand ...
Hey there, I could really use some help with a CSS and HTML issue I'm having. Take a look at the code snippet below: Here's what I'm trying to achieve: 1. Keep the boxes (.box) with images fixed in place 2. Make the hidden description (. ...
Seeking guidance on adjusting vertical alignment of text in <TextField /> const styles = theme => ({ height: { height: '20rem', }, }); class Foo extends React.component { ... <TextField InputProps={{ classes: ...
Has anyone experimented with background images and their impact on web design? Typically, backgrounds are designed to repeat in either the x or y direction, or both. For example Consider a gradient background that repeats horizontally. If the gradient i ...
Is there a way to toggle a className on click to change the style of a component? I need to rotate an arrow to the right when it's clicked and hide all components next to it using display: none;. I also require this functionality to work when ...
After reading the documentation on https://material-ui.com/style/typography/ and loading the Roboto font, I expected a simple component like this: const theme = createMuiTheme(); const App = () => { return ( <MuiThemeProvider theme={theme}> ...
Is there a way to trigger an event only when the object reaches a specific percentage of its left position? I am trying to achieve this using jQuery with the .css() method. Here is what I have so far: HTML: <div id="midDiv"><img ..../></di ...
Seeking guidance in addressing a web development issue: I have encountered a problem with a website that I am currently working on locally using WordPress. I added the following code to the header.php file: <link rel="stylesheet" type="text/css" href= ...
I am trying to extract all HTML <p>...</p> elements from a document. I have been attempting to use regular expressions (Regex) with the following pattern: Regex regex = new Regex(@"\<p\>([^\>]*)\</p\>" ...