I am struggling to align my image slider in the center of my page. It seems like a simple problem to fix, but I can't seem to get it perfectly centered both horizontally and vertically. Any tips on how to achieve this?
The CSS code for the image slider is #logo-and-slider.
Here is the link to the jsfiddle: http://jsfiddle.net/gZDVL/13/ (shout out to @MaggiQall)
You can view the live version here:
I'm having trouble grasping this concept.
Are you satisfied with the outcome?
<div><img src="http://testjd.net46.net/1.jpg" alt="1"/></div>
<div><img src="http://needlepoint.com/2.jpg" alt="1"/></div>
<div><img src="http://knittingpatterns.org/3.jpg" alt="1"/></div>
I made sure to close your img-tags with />
Should the logo be included in the center of the content? I have provided an example below with borders to illustrate the layout of the elements. If you prefer not to include the logo, it can be removed from the HTML structure. Essentially, I have centered the content within a table-cell element both horizontally and vertically, achieving a "dead center" alignment as desired :-) You can view the demonstration at http://jsfiddle.net/linuxexpert/WYadL/
HTML:
<html>
<body>
<div class="outer-box">
<div class="inner-box">
<div class="innermost-box">
<div class="logo">
Logo
</div>
<div class="controller">
<
</div>
<div class="scroller">
Image scroller
</div>
<div class="controller">
>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body {
width:100%;
height:100%;
}
.outer-box {
display:table;
width:100%;
height:100%;
}
.inner-box {
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
border:1px solid red;
text-align:center;
}
.innermost-box {
display:table;
height:50%;
width:80%;
margin:0px auto;
border:1px solid blue;
}
.innermost-box > * {
display:table-cell;
height:100%;
vertical-align:middle;
border:1px solid green;
}
.logo {
width:40%;
}
.controller {
width:5%;
}
.scroller {
width:50%;
}
I am trying to extract data from HTML using JavaScript, send it to PHP, and then receive the result back in JavaScript. After searching extensively, I have been unable to find a code snippet that works for my specific case. Here is the JavaScript code I ...
Check out my website at www.whiterootmedia.com. I am trying to prevent my ads on the right from wrapping and disappearing off the screen when the width is around 800px. I believe I need to create a wrap div container, float my ads div to the right, set a ...
Currently, I am utilizing next.js 9.5.x and am in search of a method to set up the hostname and port via the next.config.js file. Despite consulting the documentation, I have yet to discover a solution to this issue. Previously, I leveraged a series of .e ...
I've been diving into a HTML 5 Web Audio Input project lately. I'm keen to test it out on my Android/iPhone devices, but after some research, I discovered that it only functions properly in Google Chrome Canary. The problem is, I can't seem ...
I've been exploring the features of the Chakra-UI drawer component and you can find more information about it here. Overall, the functionality aligns with my needs, except for one particular aspect - instead of pushing the content to the side, the dra ...
Still getting the hang of Javascript, and I'm in the process of learning... Currently, my challenge involves calculating the total sum of values within a Bootstrap 4 table and formatting the result as currency (specifically in USD format). While I&ap ...
I've been exploring ways to bundle a super basic ES6-style class object for the browser. Here's an example: class Bar { constructor(){ this.title = "Bar"; } } module.exports = Bar; While I can easily utilize this in my node projec ...
Seeking to retrieve data from an api and utilize updated() to trigger a rerender upon a change in the state that stores the fetch url. However, encountering an issue where the updated hook continues to render even when there is no alteration in the state. ...
I am working on creating a unique table layout for a web page that resembles the design linked below: Click here to view the image http://kelostrada.pl/upload/test.png Your assistance in achieving this would be greatly appreciated. Currently, I have imp ...
I am working on creating a graph using ChartJs to visualize my expenses. Below is a snippet of my view: @login_required def index(request): truncate_month = connection.ops.date_trunc_sql('month', 'date_reg') expense = Expense. ...
When adding multiple elements to the DOM, how can we ensure that these elements also have a click handler attached to them? For instance, if there is a click handler on all elements with the "canvas-section" class, and new "canvas-section" elements are con ...
I have successfully integrated a ThreeJs Scene into a React component, following the approach outlined here. However, I am facing difficulties updating the Scene based on state changes in its parent component. In my setup, users can configure certain prope ...
I've been experimenting with some basic media queries but am encountering an issue with the div element that has the class "container." Whenever I adjust the screen size to be between 992px and 1200px, the div disappears from the page. It's perpl ...
Is there a way to watch all sass directories and generate CSS files to the corresponding 'CSS' folder, including subdirectories? The current method involves listing each directory separately in the NPM script. "scripts": { "sas ...
Initially, I pass a JavaScript variable 'confirmed' to my Django view using a POST request. Then, a Python script processes this variable to perform certain actions. Finally, I aim to pass the processed data back to my HTML/JavaScript for display ...
I'm using react-hook-form, yup in NextJS for form validation. I also implemented Lingui for internationalization by following this documentation. How can I set up internationalization in the yup validator that is supported by Lingui? The issue I am e ...
Here is the code I am using to register a javascript function on Page_Load (I also tried it on Page_Init). This javascript function switches two panels from hidden to shown based on a parameter when the page loads: protected void Page_Load(object sen ...
As someone who is relatively new to PHP, I am currently working on pulling information from an AirTable database and displaying it on a webpage, which I have successfully done. Now, I need to include a video along with the numerical data, with each set of ...
I am managing a large database with over 1000 entries, and the data size is expected to grow further. To display a subset of this data in a table, I have implemented a search feature using AJAX calls to load data dynamically based on user input. Here is ...
Why is the .js code running continuously even when the video is paused and there is no user interaction? I observed this phenomenon on a Windows 10 Atom Tablet, particularly when in energy-saving mode. The CPU usage for video playback and decoding almost ...