Struggling to center a photo using CSS styling

Hey there! I'm new to HTML and currently learning the language. I've been trying to center the top photo on my website, but no matter what I do, it just won't align properly. I've experimented with vertical-align and padding, but sadly nothing seems to work. Below is the code I have right now. Any help would be greatly appreciated!

.hudson {
  color: white;
  position: relative;
  font-size: 60px;
  top: 105px;
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
  text-align: center;
}
.threeD {
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
}
.p1 {
  position: relative;
  text-align: center;
  top: 70px;
  text-align: center;
  -webkit-animation-delay: 1s;
}
...

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Orbitron" />
<link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.min.css">
<img class="coding animated fadeInDown" src="PICTURES1/coding.png" style="max-width:125px;max-height:125px;">
<h2 class="hudson threeD animated fadeInDown">Hudson Reamer</h2>
<p class="paracolor p1 animated fadeInRightBig">blah blah blah</p>
<p class="paracolor p2 animated fadeInLeftBig">blah blah blah</p>
<p class="paracolor p3 animated fadeInRightBig">blah blah blah</p>
...

htmlcss

Answer №1

To center a standalone element, utilize left and right margin values of auto. Since the image is inline, add display: block; to allow this adjustment. Also, remember to set a width for the element:

.smith {
  color: black;
  position: absolute;
  font-size: 48px;
  top: 90px;
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
}
.threeD-effect {
  text-shadow: 0 1px 0 #ddd, 0 2px 0 #dbdbdb, 0 3px 0 #ccc, 0 4px 0 #cacaca, 0 5px 0 #bbb, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
}
.phase1 {
  position: relative;
  text-align: center;
  top: 60px;
  -webkit-animation-delay: 1s;
}
.phase2 {
  position: relative;
  text-align: center;
  top: 70px;
  -webkit-animation-delay: 1s;
}
.phase3 {
  position: relative;
  text-align: center;
  top: 80px;
  -webkit-animation-delay: 1s;
}
.programming {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width:135px;
  max-height:135px;
  padding: 12px;
}
.text-color {
  color: lightpink;
  font-size: 24px;
  font-family: Roboto;
  text-align: center;
}
#logos {
  padding-top: 95px;
  text-align: center;
}
#logos i {
  color: black;
}
body {
  background-image: url(PICTURES2/sunset.jpg);
  background-repeat: no-repeat;
}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto" />
<link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.min.css">
<img class="programming animated fadeInDown" src="PICTURES2/programming.png">
<h2 class="smith threeD-effect animated fadeInDown">Smith Euler</h2>
<p class="text-color phase1 animated fadeInRightBig">Lorem ipsum dolor sit amet,</p>
<p class="text-color phase2 animated fadeInLeftBig">consectetur adipiscing elit.</p>
<p class="text-color phase3 animated fadeInRightBig">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div id="logos">
  <a href="https://www.facebook.com/smith.euler/"><i class="fa fa-facebook fa-4x"></i></a>
  <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="512364603c346325153606344a677077766370116613">[email protected]</a>"><i class="fa fa-envelope-o fa-4x"></i></a>
  <a href="https://twitter.com/search?q=%40smitheuler&src=typd&lang=en"><i class="fa fa-twitter fa-4x"></i></a>
</div>

Answer №2

It appears that you may need to do some more research as a novice developer. There are several methods to achieve what you are looking for if you had simply done a quick search.

All you need to do is include

padding: 0 0 0 47%;

within the style attribute of your img tag.

<img class="coding animated fadeInDown" src="IMAGES/coding.png" style="padding: 0 0 0 47%; max-width:125px;max-height:125px;">

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

How may I utilize CSS to generate a dynamically resizing rotated triangle that adjusts based on the text content?

Looking to add a dynamic badge in the top left corner of a div that adjusts its size based on the text content. Check out this example: http://jsfiddle.net/sbick/npxaasht/ <article> <div class="triangle"> <span>NEW</span ...

htmlcss

Maximizing Efficiency: Using a Single Prototype-Instance Across Multiple HTML Pages

I have defined some Javascript "Classes" in separate files using the Prototype function as shown below: function Playlist(id, name){ this.id = id; this.name = name; } Playlist.prototype.getid = function(){return this.id;} Playlist.prototype.getn ...

javascripthtml

Adjust the table to line up perfectly, center the content within the table cell (td), and align the

I'm currently working on aligning a table by centering the td elements and left justifying the text inside them. My initial attempt was to use flex for center alignment, which worked to some extent but I couldn't get the left alignment right. I ...

css

arranging the divs based on the space allocation within the page

Is there a way to neatly organize the divs on a page, depending on available space? I want them to align horizontally if there is enough room before moving to the next line. The tab-content parent div may contain several divs. Any suggestions on how this c ...

htmlcss

Looking to tilt text at an angle inside a box? CSS can help achieve that effect!

Hey there, is it possible to achieve this with CSS or JavaScript? I require it for a Birt report. ...

javascriptcssbirt

Column wrapping in Bootstrap is a powerful feature that allows for

Looking for a layout similar to this: https://i.sstatic.net/BTuED.png Need a responsive design using Bootstrap 3 The purple block (col-sm-7) with a fixed height, but it can be optional The blue block (col-sm-5) with a variable height (not dynamic), and ...

jquerytwitter-bootstrapcsstwitter-bootstrap-3

Transferring canvas element via socket with JS stack size limit

I'm encountering an issue where I need to transfer a canvas element over sockets using socket.io and Node.js. The code snippet below illustrates my approach: var myCanvas = document.getElementById("myCanvas"); var ctx = myCanvas.getContext("2d"); // ...

javascripthtmlsocket.iohtml5-canvas

Combining Javascript and Django for a powerful web development solution

Having trouble setting up JS on my Django web app, despite reading through the documentation and previous queries. Using the Django dev server with the following file structure: mysite/ __init__.py MySiteDB manage.py settings.py ...

javascriptpythoncssdjango

Creating a volume shadow effect with CSS is a great way to add

Can anyone help me achieve a shadow effect like the one shown in this image example? I've attempted to use the after pseudo element, radius, and clip, but haven't been able to get the desired result. https://i.sstatic.net/pqUtb.png .page{ w ...

cssbox-shadow

What is the best method to position a submit button to the right of a cluster of radio buttons when utilizing Twitter Bootstrap?

I am trying to align a group of radio buttons and a submit button side by side using Twitter Bootstrap. I want the radio buttons on the left and the submit button aligned proportionately on the right. What is the correct method to achieve this layout? Des ...

htmlcsstwitter-bootstrap

Achieving Right Alignment of Items in Navigation Bar using Bootstrap

I'm facing a challenge aligning elements to the right in my navbar using Bootstrap. Despite trying an external CSS file, I couldn't get the desired alignment. My goal is to keep the logo and brand name on the left while right-aligning the other i ...

htmlcssbootstrap-4

The function $HTTP_RAW_POST_DATA in PHP compared with ASP

I'm currently updating an old classic asp page with a flash app, and I am in need of replicating the functionality of PHP's $HTTP_RAW_POST_DATA function in either vbscript (OR C# .NET since it's running on IIS7). I have attempted to implemen ...

phphtmlactionscript-3vbscript

The text area in iOS 11 Safari's bootstrap modal is positioned off-center from the cursor

When using Safari with iOS 11, I noticed that the input textbox cursor is appearing outside of the input textbox. This issue is specific to iOS 11 Safari and we are unsure why it is happening. As shown in the image, the cursor is not within the email input ...

htmliosbootstrap-modalmobile-safariios11

Ways to modify the text of an HTML element when hovering over it

One of my elements contains the text &times; within a <span>. Is there a way to change this symbol to something else, like &infin;, when hovered over? <span class="change-text">&times;</span> When the mouse hovers over it, I ...

javascripthtmlcss

Using an SVG filter to create a solid blue color overlay on an image

For a while now, I've been applying -webkit-filter: grayscale(100%); to render an image in grayscale. But recently, I've been wondering if it's possible to tint the image blue instead. My initial thought was to utilize an SVG filter and refe ...

csssvgfilter

Modifying text input in Angular

I am working on an Angular form that includes a text input which I would like to be able to edit by clicking on the edit button. Within the form, there are 3 buttons available: edit, cancel (which discards changes), and save (which saves changes). When t ...

htmlangularangular-materialangular11

Tips for initiating a function at a designated scroll point on a webpage

Currently, I am testing out a code snippet that allows images to flip through in a canvas element. I'm curious if it's possible to delay the image flipping effect until the viewer scrolls down to a specific section of the page where the canvas i ...

javascripthtmljquerycanvashtml5-canvas

Click a button to adjust the height of an element

My webpage features a dashboard with tabs on the left and corresponding content on the right. To ensure proper alignment, I have utilized Bootstrap to create two columns - one for the tabs and one for the content. However, I am facing an issue where the bo ...

javascriptjqueryhtmlcsstwitter-bootstrap

Guide on embedding internet audio onto an HTML webpage

I'm currently working on adding sounds and music to my program. The code that I have works perfectly when the audio files are downloaded onto my computer. However, I am looking for a way to play these sounds directly from the internet without needing ...

javascripthtml

When you adjust the size of your browser window, the content within the div

I've encountered an issue with my website: whenever I try to view it on a smaller monitor or resize the browser window, the content ends up being covered by other divs. I want to ensure that the content is always fully visible, regardless of the size ...

htmlbrowserresize