"Can someone provide guidance on properly aligning an image in a div

My deadline for my year 11 task is just one day away and I've tried multiple solutions, but it seems like I might have implemented them incorrectly in my code. I really need help! Unfortunately, I don't have a fiddle example to share because I'm not sure how to set it up. The website also insists on adding more details, so I guess I'll just keep writing until I can finally post this. I'm exhausted and can't think straight. Anyone who helps me out is a true legend, cheers from Australia!

.slideshow {
  display: none;
  padding: 10px 0 10px 0;
  margin-top: -50px;
  font-size: 25px;
  overflow-y: hidden;
}

.slide_selection {
  display: inline-block;
  padding: 20px 30px;
}

...
htmlcss

Answer №1

Would you consider me a legendary figure?

Codepen: http://codepen.io/anon/pen/NpoGPr

I utilized flexbox to perfectly center the image.

justify-content is used for horizontal centering

align-items is used for vertical centering

.slideshow {
  padding: 10px 0 10px 0;
  margin-top: -50px;
  font-size: 25px;
  overflow-y: hidden;
}

.slide_selection {
  display: inline-block;
  padding: 20px 30px;
}

.slide_selection img {
  height: 40px;
  padding: 5px;
  border-radius: 250px;
  border: #00000099 2px solid;
  transition: all .3s ease-in-out, border .5s;
}

.slide_selection img:hover {
  background-color: #00000099;
}

.slide_icon {
  display: inline;
  float: left;
  padding: 0 30px 0 30px;
  transition: all .15s ease-in-out;
}

.slide_icon:hover {
  transform: scale(1.3);
}

figcaption {
  font-size: 10px;
  font-weight: bold;
}

.slide_content {
  background-color: #00000025;
  box-shadow: inset 0 15px 10px -15px black, inset 0 -13px 10px -15px black;
  margin: -10px 0 0 0;
  padding: 30px 0;
  display: flex;
  height: 100%;
}

.slide_content img {
  height: 95px;
}

.slide_image {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide_info {
  display: inline-block;
  width: 75%;
  text-align: left;
}
<div class="slideshow">
  <div class="slide_selection">
    <div onclick="test(1);" class="slide_icon"> <img src="https://i.sstatic.net/iplpF.png" alt="" />
      <figcaption>WinRar</figcaption>
    </div>
    <div class="slide_icon"> <img src="https://i.sstatic.net/iplpF.png" alt="" />
      <figcaption>OllyDBG</figcaption>
    </div>
    <div class="slide_icon"> <img src="https://i.sstatic.net/iplpF.png" alt="" />
      <figcaption>NortonAV</figcaption>
    </div>
  </div>
  <div class="slide_content">
    <div class="slide_image">
      <img src="https://i.sstatic.net/iplpF.png" alt="" />
    </div>
    <div class="slide_info">
      <h4>Software Type: </h4>
      <h4>Release Date: </h4>
      <p>Winrar Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

Answer №2

Your code is not clear to me, but it seems like you need a div container that you can divide as needed and then place your image in the center of the page. Here's a simple example:

<div class="container">
<div class="row">
    <div class="igreen col-sm-5 col-md-5 col-lg-5">This will be the green area</div>
    <div class="col-sm-2 col-md-2 col-lg-2"></div>
    <div class="col-sm-5 col-md-5 col-lg-5">Step 1</div>
    <div class="col-sm-5 col-md-5 col-lg-5">Step 1</div>
    <div class="col-sm-2 col-md-2 col-lg-2"> <img src="my_image.png"></div>
    <div class="ired col-sm-5 col-md-5 col-lg-5">This will be the red area</div>
    <div class="col-sm-5 col-md-5 col-lg-5">Step 1</div>
    <div class="iblue col-sm-2 col-md-2 col-lg-2">This is the blue area</div>
    <div class="col-sm-5 col-md-5 col-lg-5">Step 1</div>

</div>
This is just one way to structure it within a container.

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

developing toggle switches using JSON

I am faced with a JSON containing two keys, "cars" and "others". How can I implement a toggling feature on my website using HTML/CSS/JavaScript such that: Clicking on "cars" displays the car items (small vehicle, large vehicle) in red text. Clicking on "o ...

javascripthtmlcssjson

Numerous anchor links are present

Is it possible to eliminate the red lines between "google links" while keeping the border color as red? How can I achieve this? Here is the code snippet provided: <!doctype html> <html> <head> <title>Website</title> </he ...

htmlcss

How to Conceal File Extensions with .htaccess

Can anyone provide guidance on the best way to hide .php extensions using HTAccess, even for sub-folders? I have attempted various solutions from previous answers but none seem to work. ...

phphtml.htaccess

What is the best way to adjust the size of a background image on Safari

Using Chrome When using Chrome, the functionality is just like what's depicted in the image above. However, when using Safari The issue arises, as it does not work as expected in Safari. See below for the CSS code: background-image: url(r ...

htmlcssimagesafariresize

Apply a CSS class to the header cells

I'm facing a challenge with adding a CssClass to a table that is generated automatically through C#. The table creation code looks like this: TableHeaderRow header = new TableHeaderRow(); cell1 = new TableCell { Text = "Brand" }; cell2 = new TableCel ...

c#css

Establishing the destination for an onclick event to a designated spot

I have divided my body content into two parts. The left side contains a map and buttons, where clicking on a button displays results from Arad.php in another window. How can I target the second half (split right) of my body? <body> <div cla ...

phphtmlonclicktarget

Learning the ins and outs of integrating dataTables with Angular 2

Struggling to make my table sortable by clicking on the column headers. I've tried various methods, like installing angular2-datatable (npm install angular-data-table) and importing {DataTableDirectives} from 'angular2-datatable/datatable'; ...

htmltypescriptangulardatatabledatepicker

exploring for a keyword on the primary Amazon platform (analyzing)

Hey everyone, I noticed that Amazon's main search bar code looks like this: <input type="submit" class="nav-input" value="Go" tabindex="7"> I'm considering creating a function that will locate this tag on amazon.co.uk and perform a search ...

htmlparsingseleniumbeautifulsoup

Steps to automatically switch Keyboard layout in APEX 5

My application is developed in APEX 5.1.2 and I'm struggling with inserting fields in RTL layout. It's cumbersome having to manually change the keyboard layout every time I work on these fields. Is there a way to have a field automatically switch ...

cssoracle-apex

Utilizing AngularJS for Your Business Website

We are in the process of developing a new commercial website to replace our current one. Concerns about performance are on our minds. The amount of data we have per page is not very heavy, with a maximum of 150 data binds. We plan to use AngularJS 1.2 t ...

javascripthtmlangularjs

Is there a way to set the content to be hidden by default in Jquery?

Can anyone advise on how to modify the provided code snippet, sourced from (http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show), so that the element remains hidden by default? <!DOCTYPE html> <html> <head> <scrip ...

javascriptjqueryhtmlcssajax

Using HTML files in Node.js

I'm struggling to understand how to include a file in Node.js. While other questions are focused on including JS files, I specifically need assistance with including files that contain HTML content, similar to the PHP include function. In PHP, I typi ...

htmlnode.jsexpressincludeserver-side-includes

Encountering unexpected behavior with the .data() method

I'm encountering an issue with my code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv= ...

javascriptjqueryhtmlcssattr

Set tab navigation widget with a fixed height

I am struggling with setting a fixed height for my tabs widget so that when I add more content, it will display a scrollbar instead of expanding endlessly. I have checked the CSS and JS files but cannot figure it out. It is important for me to contain this ...

javascriptjqueryhtmlcssjquery-ui

Adjust the height of the container div for the carousel according to the length of the text displayed

My image carousel features description content positioned on the right for wide-screen windows. However, I want the description to shift below the images when the browser window reaches a certain breakpoint. The challenge I am facing is that the height of ...

javascriptjqueryhtml

Arrangement of elements in HTML and CSS

I'm struggling with the alignment of div boxes in HTML and CSS. I have a wrapper and 2 boxes, with the intention of having one box on the left and the other on the right. However, the box on the right keeps appearing below the other. I want to avoid u ...

csshtml

Expanding the CSS Search Box

Visit the link I've been working on coding a CSS text box. When you hover over the button in the provided link, you'll notice that the 'Type to search' functionality is working smoothly as it moves to the right. My current focus is on ...

css

What do you notice about interactions involving 'input type=text' in HTML and JavaScript?

When a new binding is created for the value property on an input, any manual modifications by the user no longer update the value. What happens when the binding is altered? Does regular user interaction involve key press listeners? I've modified the ...

javascripthtml

What are some strategies for disregarding the effects of the !important rule

After incorporating some HTML and CSS styling into a third-party site, I encountered an issue where their styling was conflicting with mine, specifically due to certain !important declarations. I want to avoid this conflict without resorting to using !impo ...

htmlcss

What happens when HTML5 Video quality starts to decline?

Exploring the capabilities of the HTML5 video tag has left me pondering the best approach for graceful degradation in cases where a codec is not supported. Handling older browsers (or IE) that lack support for the video tag altogether is quite straightfor ...

firefoxvideohtmlaccessibilityfirefox3.5