What's causing this issue?
Here's my code snippet:
<div class="center">
<div class="line">
text
</div>
<div class="line">
text2
</div>
<div class="line">
text3
</div>
</div>
In my css file:
.line {
display: inline-Block;
width: 150px;
}
.center {
margin: 0 auto;
}
Why isn't the .center CSS rule working as expected? I want it to be centered on my screen, but it's aligning to the left corner instead.
Your center div is causing the issue because it spans the entire width of the page. This causes the line divs to align to the left of the center div. If you set a specific width for the center div, it will be centered on the page. Check out this example I created:
http://jsfiddle.net/LGuAq/
Removing the width: 470px; line will help you understand what's happening. I also added a black border around each div to illustrate their sizes and positions.
Setting a width for .center is essential to avoid it taking up the entire 100% of the container with no margin:
.center {
margin: 0 auto;
width: 50%;
}
Have you considered attempting the following:
.line {
align-items: center;
display: inline-Block;
width: 150px;
}
.center{
display: inline-block;
}
One dilemma I encountered involves displaying a percentage on a webpage with 2 tabs. The percentage is originally shown on the tab that is open when the page loads. The JavaScript code I used is quite straightforward: adaPercentColor(percent, ada) { ...
I've been attempting to connect images and sound files to my CodePen project using a Dropbox shared link. <div class="container"> <div class="row second-line"> <div class="col-12"> <div d ...
In looking through the sass files of Bootstrap 4, I noticed that the $navbar-height variable is not present. Can someone please provide me with the specific sass variable to adjust the navbar height in Bootstrap 4? ...
I'm attempting to add an image to a canvas element. Consider this code snippet (http://jsfiddle.net/n3L6e1wp/). I am aiming to replace the text shown in the canvas with an img tag. I have attempted to substitute the content of the div with: <img s ...
Seeking assistance on programmatically adding or modifying the user-agent header for Chrome browser using Selenium WebDriver. File addonpath = new File("D:\\innpjfdalfhpcoinfnehdnbkglpmogdi_20452.crx"); ChromeOptions chrome = new ChromeOptions( ...
I'm currently working on a project that involves allowing users to drag and drop multiple objects within a specified area. To achieve this, I am utilizing the html5 canvas tag. While the functionality works smoothly when dragging and dropping a single ...
I am attempting to extract information from a webpage that contains the following HTML: <div class="someclass"> <p class="name"><a href="#/word/1/">helloworld</a></p> </div> My objective is to retr ...
After implementing a CSS gallery template into my HTML code, I faced an issue. The original code contained only 4 images, but after adding nine more images, the indicator in the gallery stopped moving past the 4th image and the preview of the additional im ...
Having two divs absolutely positioned overlapping, each containing an onClick handler. The issue is that only the top element's onClick handler fires when clicked. React 17 is being used. Here is some sample code: <div style={{ position: "abs ...
Hello everyone, I'm currently in the early stages of learning about Javascript and programming in general. As I prepare for a test, I've come across a question that has me feeling stuck. I need help evaluating the following statements to ...
Currently, I am exploring the possibilities of using Masonry for my website design. I aspire to achieve a layout as sleek as 500px.com or something similar. Through experimenting with Masonry and following tutorials and advice from this forum, I have gaine ...
My challenge is aligning text over an image so that they move together when zooming in or out. However, I am facing difficulties as the text and image seem to move in different directions. I have attempted using media queries and adjusting the positions of ...
I am looking to create an interactive JavaScript menu or image map where users can press down, highlight, and hit enter on four different items to reveal hidden messages. However, I struggle with JavaScript and could really use some assistance. I have alr ...
Is there a way to make the contents of a div scroll to the left when one button is clicked and to the right when another button is clicked? I've tried using ScrollLeft, but it doesn't seem to be working... Here's the HTML code: <button ...
Can anyone assist me with selecting an input field from an iframe using jQuery? The structure of the iframe is as follows: <iframe src="https://checkout.klarna.com" id="klarna-checkout-iframe" name="klarna-checkout-iframe" class="kloading" scrolling="n ...
Using the cache.manifest file, I am able to view my project offline and everything works perfectly. However, the only issue I'm facing is that the libraries for my gallery slider are not being cached, and I'm not sure why. Can anyone lend me a ...
I have a container that contains two SVG images. I want both the container and the images to adjust their height based on a percentage of the viewport size, while staying within a specified min-height/max-height range (and maintaining the aspect ratio of t ...
XHTML <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>example</title> </head> <style > body{ background: black; } ...
There are two click listeners implemented on a page, one for a sub-navigation menu (which dynamically changes the list items in the menu) and another for a main menu (which dynamically changes the content in another section). <nav class="sub-nav"> ...
Building an app using Ionic 4 where I need to display vouchers from a database as images. Each image should act as a link to a details page showing more information about that specific voucher. However, I am struggling to figure out how to keep track of th ...