Designing a Web Layout with Vertical Image Alignment using HTML5 and CSS3

Struggling to vertically center a picture on my page, I have tried various scripts and styles but none seem to work.

You can check out my page here: TEST.esc.bugs3.com

I am attempting to center the "Arrow" picture on both the left and right sides of the main picture so that it is centered within the DIV. Currently, the picture is always at the top of the DIV and I would like it to be in the center.

Please note that I prefer not to use fixed sizes in pixels (PX), rather I want to set it as 50% so that the main picture remains at 100% height and the arrow will display at 50% of it.

Here is an example of the layout I am aiming for

Thank you for your assistance :)

Edit: Thank you for the responses so far, however, I specifically need the side div (side box) to be vertically centered with the main div (center box).

As the size of the main picture varies depending on the media, I cannot use pixel positions.

htmlcss

Answer №1

Implement CSS Flexbox to achieve modern browser compatibility: Check out the browser support for details.

.center-both{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 350px;
  background: LightSeaGreen;
}

Explore this Fiddle for practical examples.

For a more in-depth understanding of flexbox, refer to this article.

If you need to cater to older browsers like IE7/IE8, utilize the display: table-cell; property for vertical centering of content.

Answer №2

Revise the styling for Sidepanel class as illustrated

    .SidePanel {
      width: 8%;
      height: auto;
      float: left;
      background-color: blue;
      display: flex;
      justify-content: center;
      align-items: center;
   }

Answer №3

Here's a Handy Code for Your Image:

.pic{
    position: absolute;
    top: 50%;
    margin-top: -(HEIGHT/2)
}

Make sure to replace HEIGHT with your Picture's actual height in Pixels.

New Update: Ensure that your Container has a defined Height and includes the CSS Property: 

Position: (Relative|Absolute|Fixed)

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

Safari CSS issue: Relative parent and child with pseudo selector not producing consistent output across different browsers

I'm not seeking a specific fix for the code, but rather an explanation as to why it behaves this way. In Safari, children elements with a relative parent appear in a different position compared to other browsers. Changing the child to absolute positi ...

htmlcsstwitter-bootstrapsafaricross-browser

Tips on updating primeng Panel Menu appearance with scss

I'm looking to customize the color of my panel menu to black. Below is the HTML code I am using. <p-panelMenu styleClass="font-bold text-xs m-0 w-11" [model]="items" [multiple]='false'></p-panelMenu> ...

htmlcssangularsassprimeng

Saving game data from local storage to populate the player leaderboard

I have successfully developed a game in which users can play and their scores are stored locally. However, I am facing a challenge in figuring out how to showcase the scores of all users in a table on the Rankings page. Player Ranking Page <?php inclu ...

javascripthtmllocal-storage

The toggle password visibility eye is experiencing an error with an Uncaught ReferenceError: An invalid assignment is being attempted in the code

Here's a code I wrote for toggling password visibility, but I encountered an error: HTML: <!--Hide/Show password--> <button class="form-password__visibility" type="button" onclick="$('#inp ...

javascripthtmljquerypasswordstoggle

The menuToggle feature works flawlessly on desktops after integrating my AngularJS module, but unfortunately, it is not functioning

I have successfully integrated autosuggestion using AngularJS material library into my web application. Everything seems to be working fine except for one issue. When I include ng-App="MyApp2", the menuToggle button stops functioning only on mobile devices ...

javascripthtmlcssangularjs

When the last character in the route is a forward slash, the Express server will load the HTML page with CSS and JavaScript. Conversely, if the last route character

On my second html page model.html, I noticed the following issue: When I include a '/' at the end of my route address in the browser like this: http://localhost:3002/home/model/, the correct html page is loaded, but the css/js files do not load. ...

htmlcssnode.jsexpress

Showing Items in HTML and XML Format

I possess a certificate class that contains different objects such as TradingMarket, Currency, and Issuer. My goal is to represent this comprehensive information in both XML and HTML formats. However, being new to PHP development, I am unsure of the best ...

phphtmlxml

utilizing a single occasion for various purposes

I have the following buttons: <input class="btnRating" type="button" value="Project Rate" /> <input class="btnRating" type="button" value=" Education Rate" /> <input class="btnRating" type="button" value="Achievement Rate" /> I ...

javascriptjqueryhtml

Apply CSS styles from a text area using v-html

I am currently working on developing a unique WYSIWYG application where users have the ability to write CSS in a textarea field and view its direct impact on the HTML content displayed on the page. As I was experimenting with different approaches, I attemp ...

javascriptcssvue.jswysiwyg

Tips for redirecting to the index page instead of the login form after pressing the back button on the navigation

Hey everyone! I've been struggling with a problem for the past 4 hours and could really use some help. After logging in, the page redirects to a certain page, but when I press the back button in my browser, I want it to redirect back to that specific ...

phphtml

What is the mechanism behind AJAX functioning without the need to refresh the page?

I came across a code (not written by me) for a button that allows users to bookmark a person and add them to a shortlist. Here's how the code looks: Here is the JS & Ajax portion: self.isMarked = ko.observable(@(Model.Application.IsMarked ? "tru ...

javascriptjqueryhtmlajaxknockout.js

Create a replication of this in VB.NET using an ASPX Repeater to iterate over the specified content

Need help with repeating the following code in vb.net/asp.net: <ul id="prod_nav" class="clearfix"> <li class="top"><a href="05-Pink-02-Category-List.html" class="top_link"><span class="down">Body and Trim</span></a&g ...

asp.netcssvb.netasprepeater

Can the combination of two <ul> functions create a cohesive unit?

I am dealing with two different <ul> classes. One is called <ul class"list_songs">, and the other is <ul class"playlist">. The current configuration is not working efficiently. While it displays and plays the songs, it fails to proceed t ...

phpjavascripthtmlcsssoundmanager2

Send the style description to the child component

Is there a way to define a style in a parent component and then pass it to a child component? <style> .teststyle { background-color: red; width: 100px; } </style> I initially thought that if I did not use scoped, the .teststyle ...

cssvue.jscomponents

Guide to incorporating CSS and JavaScript files in Django using Python

I am currently experiencing issues with loading only static css and Javascript in my Django project. The code I have included is successfully loading image files, but the css and js files are not loading. {% load staticfiles %} <html xmlns="http://ww ...

javascripthtmlcssdjango

Create objects in the gallery

I recently developed a React Material-UI component using Typescript: <Grid container direction="row" justifyContent="flex-start" alignItems="flex-start"> <Grid item xs={5}> <B ...

javascriptcssreactjstypescriptmaterial-ui

Ways to replace inline styles with print CSS?

While inline styles are often considered "evil", can they still be inserted into HTML using JavaScript (such as jQuery animation)? ...

javascriptjquerycssprintingoverriding

Unable to establish a hyperlink to specific section of page using MUI 5 Drawer

When attempting to link to a specific part of my first page upon clicking the Shop button in the navigation Drawer, nothing happens: https://i.stack.imgur.com/FUQCp.png This snippet shows the code for the MUI 5 Drawer component: <Drawer anch ...

javascripthtmlcssreactjsmaterial-ui

A step-by-step guide to customizing the Material UI Chips delete SVG icon to appear in white color through

Using a Material UI component, I added a custom class to my chip. Attached is a screenshot showing what I mean. Currently, I am attempting to change the color of the cross button to white. After inspecting the element, I discovered that it is an SVG ico ...

htmlcssreactjstypescriptmaterial-ui

How can we add styles to text entered into a form input field in a targeted way?

Is there a way to apply styling to the second word entered into a form input text field after the user hits "enter" and the data is output? In this scenario, the text always follows the format of 3 numbers, followed by a space, and then a name. For examp ...

javascriptjqueryhtmlcssforms