Styjun

Function argument returning void or non-void type

Is a Gazan woman running for Office in Belgium?

Perl Script in Bash Here Document (does not output variable)?

Did 20% of US soldiers in Vietnam use heroin, 95% of whom quit afterwards?

Gravitational effects of a single human body on the motion of planets

Finding collisions of the first few bits of a SHA-1 hash

WordPress 5.2.1 deactivated my jQuery

Does French have the English "short i" vowel?

9x9 Map Path: In and out next to each other?

Why is unzipped directory exactly 4.0k (much smaller than zipped file)?

Is it rude to call a professor by their last name with no prefix in a non-academic setting?

How do I superimpose two math symbols?

Parallel fifths in the orchestra

Why didn't Thanos use the Time Stone to stop the Avengers' plan?

Is the Unsullied name meant to be ironic? How did it come to be?

Are black holes spherical during merger?

Can my floppy disk still work without a shutter spring?

Can I install a back bike rack without attachment to the rear part of the frame?

Find this cartoon

Where is Jon going?

Dealing with spaghetti codebase, manager asks for things I can't deliver

Why does the hash of infinity have the digits of π?

Mysterious procedure calls without parameters - but no exceptions generated

Is it possible to remotely hack the GPS system and disable GPS service worldwide?

Problems aligning images and the column to centre

How to align checkboxes and their labels consistently cross-browsersVertically align text next to an image?How to align content of a div to the bottom?How do I give text or an image a transparent background using CSS?Input with display:block is not a block, why not?How do I vertically align text in a div?How do I auto-resize an image to fit a 'div' container?How to vertically align an image inside a div?Image to be displayed as a circled Image using cssvertical-align with Bootstrap 3

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

-1

I seem to be having some issues having problems aligning three images to the centre at once, i have the float: left property but when removing that, the images stack on top of each other on the left side of the page. As you could probably tell from the code I was only worried about circle and column and not column2 and circle2 as I was using the first row to see if I could get the correct result and then apply it to the second row as well.

UPDATE:
ISSUE WAS FIXED.

* 
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 
 

 figure 
 	margin: 0;
 	padding: 0;
 	overflow: hidden;
 border-radius: 2%;
 

 .rowfirst 
 flex: 1 1 25%;
 margin: 20px 10px;
 width: 20.00%;
 padding: 6px;
 image-orientation: from-image;
 -webkit-transform: scale(1);
	 transform: scale(1);
	 -webkit-transition: .3s ease-in-out;
	 transition: .3s ease-in-out;
 border-radius: 2%;
 pointer-events: none;


.rowsecond 
 flex: 1 1 25%;
 margin: 20px 10px;
 width: 20.00%;
 padding: 6px;
 image-orientation: from-image;
 -webkit-transform: scale(1);
	 transform: scale(1);
	 -webkit-transition: .3s ease-in-out;
	 transition: .3s ease-in-out;
 border-radius: 2%;
 pointer-events: none;


.rowfirst:hover 
 -webkit-transform: scale(1.3);
 	transform: scale(1.3);


.rowsecond:hover 
 -webkit-transform: scale(1.3);
 	transform: scale(1.3);



/* Clearfix (clear floats) */
.container 
 content: "";
 clear: both;
 image-orientation: from-image;
 padding: 60px;
 display: flex;
 flex-wrap: flex-start;
 

<h1>Portfolio</h1>


</head>

<div class="container">

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%" filter:="FlipH"></figure>
 </div>

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="container">

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>
 
</div>
</div>




</body>
</html>

html css

share|improve this question

edited Mar 27 at 4:30

Adam Ferreira

asked Mar 24 at 0:50

Adam FerreiraAdam Ferreira

15

add a comment | 

-1

I seem to be having some issues having problems aligning three images to the centre at once, i have the float: left property but when removing that, the images stack on top of each other on the left side of the page. As you could probably tell from the code I was only worried about circle and column and not column2 and circle2 as I was using the first row to see if I could get the correct result and then apply it to the second row as well.

UPDATE:
ISSUE WAS FIXED.

* 
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 
 

 figure 
 	margin: 0;
 	padding: 0;
 	overflow: hidden;
 border-radius: 2%;
 

 .rowfirst 
 flex: 1 1 25%;
 margin: 20px 10px;
 width: 20.00%;
 padding: 6px;
 image-orientation: from-image;
 -webkit-transform: scale(1);
	 transform: scale(1);
	 -webkit-transition: .3s ease-in-out;
	 transition: .3s ease-in-out;
 border-radius: 2%;
 pointer-events: none;


.rowsecond 
 flex: 1 1 25%;
 margin: 20px 10px;
 width: 20.00%;
 padding: 6px;
 image-orientation: from-image;
 -webkit-transform: scale(1);
	 transform: scale(1);
	 -webkit-transition: .3s ease-in-out;
	 transition: .3s ease-in-out;
 border-radius: 2%;
 pointer-events: none;


.rowfirst:hover 
 -webkit-transform: scale(1.3);
 	transform: scale(1.3);


.rowsecond:hover 
 -webkit-transform: scale(1.3);
 	transform: scale(1.3);



/* Clearfix (clear floats) */
.container 
 content: "";
 clear: both;
 image-orientation: from-image;
 padding: 60px;
 display: flex;
 flex-wrap: flex-start;
 

<h1>Portfolio</h1>


</head>

<div class="container">

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%" filter:="FlipH"></figure>
 </div>

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="container">

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>
 
</div>
</div>




</body>
</html>

html css

share|improve this question

edited Mar 27 at 4:30

Adam Ferreira

asked Mar 24 at 0:50

Adam FerreiraAdam Ferreira

15

add a comment | 

I seem to be having some issues having problems aligning three images to the centre at once, i have the float: left property but when removing that, the images stack on top of each other on the left side of the page. As you could probably tell from the code I was only worried about circle and column and not column2 and circle2 as I was using the first row to see if I could get the correct result and then apply it to the second row as well.

UPDATE:
ISSUE WAS FIXED.

* 
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 
 

 figure 
 	margin: 0;
 	padding: 0;
 	overflow: hidden;
 border-radius: 2%;
 

 .rowfirst 
 flex: 1 1 25%;
 margin: 20px 10px;
 width: 20.00%;
 padding: 6px;
 image-orientation: from-image;
 -webkit-transform: scale(1);
	 transform: scale(1);
	 -webkit-transition: .3s ease-in-out;
	 transition: .3s ease-in-out;
 border-radius: 2%;
 pointer-events: none;


.rowsecond 
 flex: 1 1 25%;
 margin: 20px 10px;
 width: 20.00%;
 padding: 6px;
 image-orientation: from-image;
 -webkit-transform: scale(1);
	 transform: scale(1);
	 -webkit-transition: .3s ease-in-out;
	 transition: .3s ease-in-out;
 border-radius: 2%;
 pointer-events: none;


.rowfirst:hover 
 -webkit-transform: scale(1.3);
 	transform: scale(1.3);


.rowsecond:hover 
 -webkit-transform: scale(1.3);
 	transform: scale(1.3);



/* Clearfix (clear floats) */
.container 
 content: "";
 clear: both;
 image-orientation: from-image;
 padding: 60px;
 display: flex;
 flex-wrap: flex-start;
 

<h1>Portfolio</h1>


</head>

<div class="container">

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%" filter:="FlipH"></figure>
 </div>

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="container">

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>
 
</div>
</div>




</body>
</html>

html css

share|improve this question

edited Mar 27 at 4:30

Adam Ferreira

asked Mar 24 at 0:50

Adam FerreiraAdam Ferreira

15

* 
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 
 

 figure 
 	margin: 0;
 	padding: 0;
 	overflow: hidden;
 border-radius: 2%;
 

 .rowfirst 
 flex: 1 1 25%;
 margin: 20px 10px;
 width: 20.00%;
 padding: 6px;
 image-orientation: from-image;
 -webkit-transform: scale(1);
	 transform: scale(1);
	 -webkit-transition: .3s ease-in-out;
	 transition: .3s ease-in-out;
 border-radius: 2%;
 pointer-events: none;


.rowsecond 
 flex: 1 1 25%;
 margin: 20px 10px;
 width: 20.00%;
 padding: 6px;
 image-orientation: from-image;
 -webkit-transform: scale(1);
	 transform: scale(1);
	 -webkit-transition: .3s ease-in-out;
	 transition: .3s ease-in-out;
 border-radius: 2%;
 pointer-events: none;


.rowfirst:hover 
 -webkit-transform: scale(1.3);
 	transform: scale(1.3);


.rowsecond:hover 
 -webkit-transform: scale(1.3);
 	transform: scale(1.3);



/* Clearfix (clear floats) */
.container 
 content: "";
 clear: both;
 image-orientation: from-image;
 padding: 60px;
 display: flex;
 flex-wrap: flex-start;
 

<h1>Portfolio</h1>


</head>

<div class="container">

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%" filter:="FlipH"></figure>
 </div>

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="container">

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>
 
</div>
</div>




</body>
</html>

* 
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 
 

 figure 
 	margin: 0;
 	padding: 0;
 	overflow: hidden;
 border-radius: 2%;
 

 .rowfirst 
 flex: 1 1 25%;
 margin: 20px 10px;
 width: 20.00%;
 padding: 6px;
 image-orientation: from-image;
 -webkit-transform: scale(1);
	 transform: scale(1);
	 -webkit-transition: .3s ease-in-out;
	 transition: .3s ease-in-out;
 border-radius: 2%;
 pointer-events: none;


.rowsecond 
 flex: 1 1 25%;
 margin: 20px 10px;
 width: 20.00%;
 padding: 6px;
 image-orientation: from-image;
 -webkit-transform: scale(1);
	 transform: scale(1);
	 -webkit-transition: .3s ease-in-out;
	 transition: .3s ease-in-out;
 border-radius: 2%;
 pointer-events: none;


.rowfirst:hover 
 -webkit-transform: scale(1.3);
 	transform: scale(1.3);


.rowsecond:hover 
 -webkit-transform: scale(1.3);
 	transform: scale(1.3);



/* Clearfix (clear floats) */
.container 
 content: "";
 clear: both;
 image-orientation: from-image;
 padding: 60px;
 display: flex;
 flex-wrap: flex-start;
 

* 
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 
 

 figure 
 	margin: 0;
 	padding: 0;
 	overflow: hidden;
 border-radius: 2%;
 

 .rowfirst 
 flex: 1 1 25%;
 margin: 20px 10px;
 width: 20.00%;
 padding: 6px;
 image-orientation: from-image;
 -webkit-transform: scale(1);
	 transform: scale(1);
	 -webkit-transition: .3s ease-in-out;
	 transition: .3s ease-in-out;
 border-radius: 2%;
 pointer-events: none;


.rowsecond 
 flex: 1 1 25%;
 margin: 20px 10px;
 width: 20.00%;
 padding: 6px;
 image-orientation: from-image;
 -webkit-transform: scale(1);
	 transform: scale(1);
	 -webkit-transition: .3s ease-in-out;
	 transition: .3s ease-in-out;
 border-radius: 2%;
 pointer-events: none;


.rowfirst:hover 
 -webkit-transform: scale(1.3);
 	transform: scale(1.3);


.rowsecond:hover 
 -webkit-transform: scale(1.3);
 	transform: scale(1.3);



/* Clearfix (clear floats) */
.container 
 content: "";
 clear: both;
 image-orientation: from-image;
 padding: 60px;
 display: flex;
 flex-wrap: flex-start;
 

<h1>Portfolio</h1>


</head>

<div class="container">

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%" filter:="FlipH"></figure>
 </div>

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="container">

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>
 
</div>
</div>




</body>
</html>

<h1>Portfolio</h1>


</head>

<div class="container">

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%" filter:="FlipH"></figure>
 </div>

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowfirst">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="container">

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>

 <div class="rowsecond">
 <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
 </div>
 
</div>
</div>




</body>
</html>

share|improve this question

edited Mar 27 at 4:30

Adam Ferreira

asked Mar 24 at 0:50

Adam FerreiraAdam Ferreira

15

share|improve this question

edited Mar 27 at 4:30

Adam Ferreira

asked Mar 24 at 0:50

Adam FerreiraAdam Ferreira

15

asked Mar 24 at 0:50

Adam FerreiraAdam Ferreira

15

asked Mar 24 at 0:50

Adam FerreiraAdam Ferreira

15

1 Answer
1

active

oldest

votes

0

Adam.

You can use the code below, as your case is related to images inside a container block:

.circle 
margin: 2%;
image-orientation: from-image;
text-align:center;

In case you wish to align images as inline elements, you should use the properties below:

display: block;
margin: 0 auto;

As you commented that the solution above did not work, I suggest that you use it with flex-box approach - With flex-box, you will have images centralized in the middle of the rows (and page). The rows will also be responsive. Try the code below:

<!DOCTYPE html>
<html>

<style>

.item 
 flex: 1 1 25%;
 margin: 20px 10px;
 text-align: center;


.container 
 padding: 60px;
 display: flex;
 flex-wrap: wrap;
 align-items: flex-start;


</style>
<head>

<title>Page Title</title>
</head>
<body>

<div class="container">

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 </div>

</body>
</html>

Cheers

share|improve this answer

edited Mar 24 at 5:25

answered Mar 24 at 1:11

Pedro CoelhoPedro Coelho

7010

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks! but it didn't work unfortunately :(
  
  – Adam Ferreira
  Mar 24 at 1:18
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @AdamFerreira but do you want to align the 3 images in the center of a row or in a column (one above each other)?
  
  – Pedro Coelho
  Mar 24 at 1:51
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I want to align them in the centre of a row.
  
  – Adam Ferreira
  Mar 24 at 3:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @AdamFerreira I have just updated my answer. Test that code, with flex-box usage. It's the most professional approach you may apply. Cheers.
  
  – Pedro Coelho
  Mar 24 at 5:27
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @AdamFerreira have you tried the code I added to my answer?
  
  – Pedro Coelho
  Mar 24 at 22:29
  

  
  
  
  

 | 
show 7 more comments

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55319772%2fproblems-aligning-images-and-the-column-to-centre%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Adam.

You can use the code below, as your case is related to images inside a container block:

.circle 
margin: 2%;
image-orientation: from-image;
text-align:center;

In case you wish to align images as inline elements, you should use the properties below:

display: block;
margin: 0 auto;

As you commented that the solution above did not work, I suggest that you use it with flex-box approach - With flex-box, you will have images centralized in the middle of the rows (and page). The rows will also be responsive. Try the code below:

<!DOCTYPE html>
<html>

<style>

.item 
 flex: 1 1 25%;
 margin: 20px 10px;
 text-align: center;


.container 
 padding: 60px;
 display: flex;
 flex-wrap: wrap;
 align-items: flex-start;


</style>
<head>

<title>Page Title</title>
</head>
<body>

<div class="container">

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 </div>

</body>
</html>

Cheers

share|improve this answer

edited Mar 24 at 5:25

answered Mar 24 at 1:11

Pedro CoelhoPedro Coelho

7010

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks! but it didn't work unfortunately :(
  
  – Adam Ferreira
  Mar 24 at 1:18
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @AdamFerreira but do you want to align the 3 images in the center of a row or in a column (one above each other)?
  
  – Pedro Coelho
  Mar 24 at 1:51
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I want to align them in the centre of a row.
  
  – Adam Ferreira
  Mar 24 at 3:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @AdamFerreira I have just updated my answer. Test that code, with flex-box usage. It's the most professional approach you may apply. Cheers.
  
  – Pedro Coelho
  Mar 24 at 5:27
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @AdamFerreira have you tried the code I added to my answer?
  
  – Pedro Coelho
  Mar 24 at 22:29
  

  
  
  
  

 | 
show 7 more comments

0

Adam.

You can use the code below, as your case is related to images inside a container block:

.circle 
margin: 2%;
image-orientation: from-image;
text-align:center;

In case you wish to align images as inline elements, you should use the properties below:

display: block;
margin: 0 auto;

As you commented that the solution above did not work, I suggest that you use it with flex-box approach - With flex-box, you will have images centralized in the middle of the rows (and page). The rows will also be responsive. Try the code below:

<!DOCTYPE html>
<html>

<style>

.item 
 flex: 1 1 25%;
 margin: 20px 10px;
 text-align: center;


.container 
 padding: 60px;
 display: flex;
 flex-wrap: wrap;
 align-items: flex-start;


</style>
<head>

<title>Page Title</title>
</head>
<body>

<div class="container">

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 </div>

</body>
</html>

Cheers

share|improve this answer

edited Mar 24 at 5:25

answered Mar 24 at 1:11

Pedro CoelhoPedro Coelho

7010

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks! but it didn't work unfortunately :(
  
  – Adam Ferreira
  Mar 24 at 1:18
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @AdamFerreira but do you want to align the 3 images in the center of a row or in a column (one above each other)?
  
  – Pedro Coelho
  Mar 24 at 1:51
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I want to align them in the centre of a row.
  
  – Adam Ferreira
  Mar 24 at 3:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @AdamFerreira I have just updated my answer. Test that code, with flex-box usage. It's the most professional approach you may apply. Cheers.
  
  – Pedro Coelho
  Mar 24 at 5:27
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @AdamFerreira have you tried the code I added to my answer?
  
  – Pedro Coelho
  Mar 24 at 22:29
  

  
  
  
  

 | 
show 7 more comments

Adam.

You can use the code below, as your case is related to images inside a container block:

.circle 
margin: 2%;
image-orientation: from-image;
text-align:center;

In case you wish to align images as inline elements, you should use the properties below:

display: block;
margin: 0 auto;

As you commented that the solution above did not work, I suggest that you use it with flex-box approach - With flex-box, you will have images centralized in the middle of the rows (and page). The rows will also be responsive. Try the code below:

<!DOCTYPE html>
<html>

<style>

.item 
 flex: 1 1 25%;
 margin: 20px 10px;
 text-align: center;


.container 
 padding: 60px;
 display: flex;
 flex-wrap: wrap;
 align-items: flex-start;


</style>
<head>

<title>Page Title</title>
</head>
<body>

<div class="container">

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 </div>

</body>
</html>

Cheers

share|improve this answer

edited Mar 24 at 5:25

answered Mar 24 at 1:11

Pedro CoelhoPedro Coelho

7010

.circle 
margin: 2%;
image-orientation: from-image;
text-align:center;

display: block;
margin: 0 auto;

<!DOCTYPE html>
<html>

<style>

.item 
 flex: 1 1 25%;
 margin: 20px 10px;
 text-align: center;


.container 
 padding: 60px;
 display: flex;
 flex-wrap: wrap;
 align-items: flex-start;


</style>
<head>

<title>Page Title</title>
</head>
<body>

<div class="container">

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 <div class="item">
 <img src="../photos/example.jpg" alt="image for testing">
 </div>

 </div>

</body>
</html>

share|improve this answer

edited Mar 24 at 5:25

answered Mar 24 at 1:11

Pedro CoelhoPedro Coelho

7010

answered Mar 24 at 1:11

Pedro CoelhoPedro Coelho

7010

answered Mar 24 at 1:11

Pedro CoelhoPedro Coelho

7010