I'm a beginner when it comes to css, but I've run into an issue with my text in html/css. Whenever I resize my webpage, the text shifts to the left side of the page and becomes misaligned. Here's the code I'm using:
**CSS:**
#NewsPosts {
position: fixed;
width: 75%;
top: 260px;
left: 32%;
padding: 30px;
overflow: hidden;
**HTML:**
<!--News Posts-->
<div id="NewsPosts">
<p>Text content here</p>
</div>
To perfectly center the element with the ID #NewPosts on all screens, you can achieve this by following these steps:
http://jsfiddle.net/uknqdr6g/
CSS
#NewsPosts {
width: 75%;
/* margin-top:260px; If you want to use the margin-top */
margin-left:auto;
margin-right:auto;
text-align: center;
padding: 30px;
}
If you prefer to give it a position:fixed;, you can rearrange your code as shown in this example instead: http://jsfiddle.net/uknqdr6g/1/
Html
<div id="container">
<div id="NewsPosts">
<p>Enter your text here</p>
<img src="http://images5.fanpop.com/image/photos/31100000/random-random-31108109-500-502.jpg" width="300" height="auto">
</div>
</div>
CSS
#container {
left: 50%;
width:400px;
/* margin-top:260px; if you want to maintain your margin-top property */
margin-left: -200px; /* Half of the width */
background:#000;
padding:20px;
position: fixed;
}
#NewsPosts {
width:100%;
left: 0;
right: 0;
text-align: center;
overflow: hidden;
background:#fff;
}
If you're looking to center an element on a web page, here's a simple method that can help:
In your HTML -
<div class="content">
</div>
You can name this div whatever you like as long as it's the element you want to be in the center of the page. Then, in your CSS, add the following -
html, body {
width: 100%;
height: 100%;
background: #000;
}
.content {
width: 50%;
height: 50%;
position: relative;
top: 50%;
transform: translateY(-50%);
background: #fff;
margin: 0 auto;
}
Setting the width and height of html and body at 100% gives your content something to center from.
position: relative;
top: 50%;
transform: translateY(-50%);
This part is crucial. It tells the browser to vertically align the content within its parent element along the Y axis. The parent element in this case is the body. To ensure horizontal alignment, include
margin: 0 auto;
Feel free to play around with the height and width values to see how the centring holds up. Your content should remain centered regardless of its dimensions.
Here are two arrays that I have: First Array: "workingHours": [ { "opening": "09:30", "closing": "13:30", "dayName": "sunday" }, { ...
My container has content that exceeds its size in both directions. To see the issue, try scrolling horizontally and vertically on the table available here: The vertical scrollbar is visible as desired, except that it gets hidden behind the table header un ...
There is a button labeled copy to clipboard on the error information tab that allows users to copy dynamically generated error information. This information changes based on the required data and is displayed as an expression. However, when attempting to ...
I'm currently facing issues with aligning divs at the bottom within multiple vertically aligned divs. <p>Top of page</p> <div id="container"> <div class="message">area1</div> <div class="message">area2</ ...
Using the vertex positions provided below, I am creating a square using THREE.LineSegments (or even by a simple THREE.Line.) vertices: path.vertices = [ new THREE.Vector3( 3.4000015258789062, 0, 3.4000015258789062 ), new THREE.Vector3( 10.6000061 ...
<Router> <Routes> <Route path='/' element={<Navbar />} /> <Route path='/' element={<div className='recipes'> {query ? query.map((object, i) => ( <Recipe ...
I have been trying to figure out how to get the red box to display in front of the other flex items, but none of my attempts seem to work. .box { font-size: 2.5rem; width: 100px; line-height: 100px; text-align: center; } .front .box { margin: ...
Is there a solution to ensure that images of different sizes have the same height on a card? The issue is that the content is dynamic and coming from a CMS, so I don't know in advance what the image size will be or how much text will be in the card. & ...
I'm attempting to adjust the cursor property within an Angular function. The issue I'm facing is that when I begin scrolling the webpage, the cursor changes to a pointer, but when I stop scrolling, it remains as a pointer. I've attempted to ...
I am currently facing an issue with my webpage on Android (Galaxy SIII). The problem occurs when visitors try to enter their email in the form at the bottom of the page. The keyboard becomes visible, causing the design to look messy. When using Chrome, the ...
Hey there! I'm having an issue with my page layout, here's what it looks like: --- title: Coffee replace: true --- {{> products-list-style}} So, my partial "products-list-style" is like this: {{#if ../replace}}Replace{{else}}Add to Cart{{/i ...
I have a card with the style property "display: flex;" applied to it along with other stylings, all of which are checked in the snippet below. My goal is for the text within the card to move to a new line once its width reaches either 120px or 7 ...
Currently, I am customizing a Bootstrap template and my objective is to modify the color scheme of the navigation bar located at the top. The segment of code that pertains to this task is as follows: <!-- Navigation --> <nav class="navbar navb ...
I am struggling with an iframe that pops up when a button is clicked. However, the only way to close or collapse it is by clicking outside the window. I would like to have a close button in the top left corner of the popup so that users can easily close th ...
Need help centering a logo in my login form using Material-UI. Everything else is centered except for the logo, which is stuck to the left side of the card. I've tried adding align="center" and justify="center" under the img tag, but it's still ...
I recently bought a Wordpress web template and hired a designer to work on it before uploading it to the site. Now, I want to make some modifications to the site myself. However, despite downloading all the files, I can't seem to locate any folders w ...
Could someone help explain why Chrome (Version 78.0.3904.97) doesn't adhere to flexbox css rules when trying to center a Twitter timeline on a web page? I've encountered an issue where attempting to center the Twitter timeline using the code pro ...
I am currently working on an AngularJS client application that displays data in a table using the dir-paginate directive from dirPagination.js. Here is the code snippet: <input type="text" ng-change="SomeTask()" ng-model="vm.searchKeyword" /> &l ...
I need help writing an SQL query to retrieve a select based on the NumberRecords attribute in a table. The issue I'm facing is that there are multiple rows with the same numbers, like 1 and 2. I only want to display those rows. Here is the code snipp ...
Every time I attempt to use icons that I have loaded into my source code, I keep getting this default icon displayed: https://i.sstatic.net/AWhcW.png I'm uncertain about what exactly is causing this issue. Here is the layout of my file tree for ref ...